Nav width – header & footer

  • This is my test site:

    https://temp1.dev6.webenabled.net

    Goran theme, how can I widen the top navigation so that when adding enough links it wont wrap?

    Using Jetpack > Edit css

    .main-navigation {
    width: XXXpx;
    }

    XXX being wide enough to fit in all the links. Will that suffice?

    Secondly, for the footer nav, the container is even smaller (240px). How can I change this width? I’ve poked around but nothing seems to stick across Mozilla & Chrome and any partially successful attempt causes issues with a bottom border being out of alignment. Thank you for any guidance.

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

  • Will that suffice?

    have you tried it?

    .main-navigation, .footer-navigation { width: auto; }

    Thread Starter folkswaggin

    (@folkswaggin)

    Added that. Still no luck

    clear the browser cache, for example by reloading the page (a few times…), or possibly by pressing ‘CTRL F5’ or whatever your browser needs.

    Moderator Kathryn Presner

    (@zoonini)

    The site-branding div – currently empty – is still taking up 315px of width, so the menu isn’t able to use that area.

    Try hiding that element and increasing the main-navigation element to 100%:

    .main-navigation {
   width: 100%;
}
.site-branding {
  display: none;
}

    Let me know how it goes.

    Thread Starter folkswaggin

    (@folkswaggin)

    Thank you so much Kathryn! That worked for my header navigation.

    The bottom nav seems to be constricted by something I don’t understand as well.

    ?

    Moderator Kathryn Presner

    (@zoonini)

    This works on my test site for the footer menu:

    .site-info {
    display: none;
}
.footer-navigation {
    width: 90%;
}

    I don’t see the .site-info element on your site, did you edit the theme file to remove it? Keep in mind that editing the theme files directly isn’t recommended, as you’ll lose all your changes every time you update the theme. I suggest you stick to CSS changes that can be isolated in your custom CSS plugin. ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Nav width – header & footer’ is closed to new replies.