Theme with layout like TwentyTen but fully responsive

  • journeyingthroughthebible · Member ·

    Hi – I am looking for a theme that has a similar layout to TwentyTen, but which is fully responsive. I like the fact that TwentyTen had the banner/header image immediately below the website title, and then the menu below that. This looked better, in my view, and seemed to me more logical. I have tried TwentySixteen and the menu cannot be below the header/banner image, and I’ve just tried TwentTwelve, and this seems similar (TwentyTwelve also has the advantage of being very fast-loading, according to Pingdom). So is there a fully responsive ‘TwentyTen’-style theme? I’d be happy for the website title to reside over the banner image, as an alternative, but I need the banner next to or under the website title. Does anyone know of what I could use? Many thanks, Rob

    The blog I need help with is: (visible only to logged in users)

  • kathrynwp · Staff ·

    If you like Twenty Twelve or Twenty Sixteen, the various elements can be moved around using a CSS technique called flexbox.

    Once you’ve settled on a theme and added your custom header graphic, let us know the exact order you would like and we can help you with the necessary code.

  • journeyingthroughthebible · Member ·

    Hi kathrynwp
    Thanks for your reply, this is really helpful to learn about FlexBox, I have not heard of this feature before. I have begun to investigate moving the header with TwentyTwelve, and found a few results from the Web, but haven’t had opportunity to progress this. But I can’t so far find any way to do this with TwentySixteen outside of using php, which I can’t use on WordPress.com. I would prefer to go with TwentySixteen (more recent and less likely to be ‘retired’ any time soon) and that’s the theme I’m on at the moment. Would you be able to show me how to move the header image above the menu, and therefore immediately under the website title, with FlexBox? (The header image really belongs with the website title, to give a kind of visual impression for the site.) Just to let you know that I have customised the menu so far using the following CSS:
    #site-header-menu {
    padding: 0 1em;
    margin: 0;
    }
    #site-header-menu,
    #site-header-menu .sub-menu li {
    background-color: #000;
    }
    #site-header-menu a {
    color: #fff;
    }
    #site-header-menu a:hover {
    background-color: #8c0707;
    }
    .main-navigation li {
    border: 0 !important;
    }
    With many thanks for any help you can give. Rob

  • kathrynwp · Staff ·

    It turns out that we can use this technique in Twenty Twelve, but not in Twenty Sixteen, because of its more complex layout. You can give this a try:

    /* Move custom header above menu in Twenty Twelve */
.site-header {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;    
    flex-direction: column;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-orient: vertical; 
}
.header-image {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}

.main-navigation {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
  • journeyingthroughthebible · Member ·

    Hi Many thanks for this, this is really appreciated. It worked, and the menu went below the header image. However, my CSS for changing the colour of the menu items didn’t seem to work. Today, however, I have been exploring the TwentySeventeen theme (I wanted to stay with a default theme, even though I have Premium option, as default themes are likely to be supported more, and far more people use these, so more help available on forums). I didn’t think TwentySeventeen would be suitable (its advertised as more of a business theme) but actually I really like it. The menu is where I want it, and the title is over the header image , which itself is larger, and this looks great. Perhaps I’ll go with this theme for now and see how it goes. Thanks again for your help. Rob

  • kathrynwp · Staff ·

    Glad you found a theme you like.

    Much CSS is theme-specific, so a piece of CSS that works for one theme usually needs to be adjusted when switching themes.

    Also, keep in mind that for this reason, your CSS editor is wiped clean every time you switch themes. If you want to view your past CSS, click on the “CSS Revisions” link in the editor to access it.

    https://creationtonewcreation.wordpress.com/wp-admin/themes.php?page=editcss

    Revisions are available in the right column.

    One thing I noticed was that you’ve tried to change the font of the site title with this line:

    font-family: myriad pro,;

    That won’t work, for a few reasons: (1) you can only use fonts that are either the theme’s default fonts, fonts that you have selected in the Customizer’s Fonts panel, or fonts that are commonly included in operating systems, and (2) fonts that have two words must be in quotes.

    If you need further help customizing Twenty Seventeen with CSS, please feel free to post over in the CSS Customization forum, or since you have a Premium plan, you can also access live chat support:
    https://wordpress.com/help/contact

  • journeyingthroughthebible · Member ·

    Hi Kathrynwp
    Many thanks for your reply – yes, TwentySeventten is working for me, and I will stay with this theme, I think, for some while to come. Thanks for your advice – I have in fact posted on the CSS Customisation forum, but will need to revise the post now, having got your advice about the fonts.
    Once again, many thanks, Rob

  • kathrynwp · Staff ·

    You’re very welcome, glad you found a theme you like!

  • The topic ‘Theme with layout like TwentyTen but fully responsive’ is closed to new replies.