WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] how to make my menu bar full page width

[Resolved] how to make my menu bar full page width

  • my menu bar is either a bit short on the right side, or is aligned to the left. the theme settings layout is set to full width and responsive. the footer stretches from side to side, (although I have set the background color to white so you can’t see it right now) so it is ok. I added css to make my menu bar links centered, but I would like to have the bar stretch from side to side like the footer. this is the css I added…

    .main-navigation {
    text-align: center;
    width: 100%;
    }

    .main-navigation ul {
    display: inline-block;
    }

    here is a link to the page. any help is very appreciated. the theme is called vantage, by site origin.

Viewing 15 replies - 1 through 15 (of 22 total)
  • ps- I would not mind just centering the bar but stretching it to fit side to side is my first choice.

    Your theme’s #masthead header is padded 35px on either side which adds that space

    Your theme’s use of negative margins for the navigation seems to pull it off centre

    which means?? are you saying it is designed to look like that? is there any way to at least center it?

    the menu bar isn’t really centered. if you see the home page, you can see what I mean. link

    Ah… I just installed the theme and added your changes. It’s actually what you added that’s throwing it off … I was just able to correct it by tweaking at the points I mentioned above (I hadn’t initially looked at your code, just played around in browser).

    I suppose what would be easier would be to adjust what you added in your child theme.

    So, what were your original intentions which led to you adding your child theme stuff? As far as I can see the nav is 100% width already

    I wanted the menu links to be centered.

    In your child theme, when I pull the width: 100% from

    .main-navigation {
     text-align: center;
     width: 100%;
     }

    Things look OK again on my test site

    hmmm. not sure whats up. tried to change my footer text color thru theme settings and it didn’t change, but I changed the footer background to see the width.

    header still looks weird tome on my side.

    do you see the difference between the header width and the footer width?

    test.rvoodoo.com is my WP testing environment, I have your theme installed now

    In your first post, you gave this code

    .main-navigation {
     text-align: center;
     width: 100%;
     }

    I changed that to

    .main-navigation {
     text-align: center;
     }

    And it looks like my nav bar is full width on my test site

    EDIT: I do see the difference on your site. The 100% code I referenced above is breaking your header navigation

    ok..let me give your css a shot…

    still not working for me. I removed the 100%. maybe I need to clear cache? how do I do that easily without losing all my passwords, etc.?

    im using ie 11.

    just press ctrl+f5 to reload the page

    didn’t help. still looks lopsided on my side:(

    I still see the bit of code in your child theme…

    /*
    Theme Name:     Vantage Premium Child
    Author: William Wofford, Jr.
    Template:       vantage
    */
    @import url("../vantage/style.css");
    
    .main-navigation {
    text-align: center;
    width: 100%;
    }
    
    .main-navigation ul {
    display: inline-block;
    }
    
    .home .entry-header {
    display: none;
    }

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘[Resolved] how to make my menu bar full page width’ is closed to new replies.