The home page layout differs from the rest.

  • I am trying to edit the Twenty Eleven theme using a child theme.

    I have tried to make a few universal changes such as extending the navigation bar.

    I have managed to di this by adding:
    body {
    padding: 0 0;}

    #page {
    max-width: none;}

    #branding, #main, #footerMenu ul, #access ul {
    width: 1000px;
    margin: 0 auto;
    }

    This has extended the navigation bar on all the pages except on the home page.

    Is there anyway to ensure that any changes are applied to the home page as well?

    https://moshinoshi.com/

    Many thanks

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi Soooks,

    It looks like the header in the home page of your site has a different structure with respect to the other pages. In fact, the navigation is outside the header element in other pages and inside the header in the rest of the site.

    I’m not too sure about the CSS you added above. I would delete the width:1000px in all those elements (it’s not ideal to have those elements with a fixed width, given that websites need to be responsive nowadays).

    Try out this CSS in your child theme:

    #branding,
#main,
#footerMenu ul,
#access ul {
    margin: 0 auto;
    width: 100%;
}

    I hope this helps ??
    -Maria Antonietta

    Thread Starter soooks

    (@soooks)

    Hi Maria

    Thank you for your reply.

    I have added the code suggested, and it has mean the navigation bar appears the same on the home page as well as the others.
    I had hoped to have an extended naviagation bar that goea across the whole page :
    eg – https://www.bbc.co.uk/gardening/ the black navigation bar here

    (im not sure if i need to start a new thread to go in to his)

    You mentioned that the home page of my site has a different structure with respect to the other pages…. i was wondering – is there a way that i can make them the same?

    (eg another change i have made is adding an (example) picter to the header). but again this hasn’t happened on the home page but it does appear in the rest.
    I made this change in the header.php file
    by adding <img id=”site-logo” in

    <h1 id=”site-title”><span>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><img id=”site-logo” src=”<?php echo get_stylesheet_directory_uri(); ?>/images/site-logo.png” alt=”” /><?php bloginfo( ‘name’ ); ?></span></h1>

    To have a header section with the navigation that extends the entire window, you’ll need to modify the mark-up inside the template by moving the header section outside of the page element just below the opening body tag. To modify a page template the simplest way would be to copy the template file you want to modify from the parent into the child theme and add you mods in there.

    However, browsing the twenty eleven theme files, it seems to me that there is only 1 header file and no special template file for the home page, which means that the home page uses the same header structure and the same overall template as all of the other pages on the site. Are there any other changes that you made to your child theme with respect to the parent theme?

    Also, with regard to the image, did you try adding it using the built-in header image option rather than hard-coding it into the template?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘The home page layout differs from the rest.’ is closed to new replies.