WordPress.org

Forums

[resolved] how to make my menu bar full page width (23 posts)

  1. bwoff
    Member
    Posted 1 year ago #

    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.

  2. bwoff
    Member
    Posted 1 year ago #

    ps- I would not mind just centering the bar but stretching it to fit side to side is my first choice.

  3. Rev. Voodoo
    Volunteer Moderator
    Posted 1 year ago #

    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

  4. bwoff
    Member
    Posted 1 year ago #

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

  5. bwoff
    Member
    Posted 1 year ago #

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

  6. Rev. Voodoo
    Volunteer Moderator
    Posted 1 year ago #

    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

  7. bwoff
    Member
    Posted 1 year ago #

    I wanted the menu links to be centered.

  8. Rev. Voodoo
    Volunteer Moderator
    Posted 1 year ago #

    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

  9. bwoff
    Member
    Posted 1 year ago #

    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.

  10. bwoff
    Member
    Posted 1 year ago #

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

  11. Rev. Voodoo
    Volunteer Moderator
    Posted 1 year ago #

    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

  12. bwoff
    Member
    Posted 1 year ago #

    ok..let me give your css a shot...

  13. bwoff
    Member
    Posted 1 year ago #

    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.

  14. Rev. Voodoo
    Volunteer Moderator
    Posted 1 year ago #

    just press ctrl+f5 to reload the page

  15. bwoff
    Member
    Posted 1 year ago #

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

  16. Rev. Voodoo
    Volunteer Moderator
    Posted 1 year ago #

    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;
    }
  17. bwoff
    Member
    Posted 1 year ago #

    I made the change. maybe it isn't changing thru my theme settings? like I said, I tried to make a footer text color change and it didn't work. I could change it thru my file manager I guess.

  18. bwoff
    Member
    Posted 1 year ago #

    got it!

  19. Rev. Voodoo
    Volunteer Moderator
    Posted 1 year ago #

    Looks 100% to me! Is that what you were after?

  20. bwoff
    Member
    Posted 1 year ago #

    I had to change it thru the editor rather than my dashboard custom css. thanks very much for your patience!

  21. bwoff
    Member
    Posted 1 year ago #

    that's what I wanted.

  22. Rev. Voodoo
    Volunteer Moderator
    Posted 1 year ago #

    Fantastic! Glad to help!

  23. bwoff
    Member
    Posted 1 year ago #

    thanks, man:)

Topic Closed

This topic has been closed to new replies.

About this Topic