Full width nav not working right

Community Forums Forums Design Tips and Tricks Full width nav not working right

This topic is: not resolved


This topic contains 1 reply, has 2 voices, and was last updated by  Marcy 2 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #66139



    The full width navigation looks fine in a full-screen setting, but if I make the window smaller or view on mobile, it looks wrong. Any ideas how to fix this?



    If you edit the width of the #nav element, then the links will drop below the nav bar when you make the screen smaller.

    Find this:

    #nav {
        background: -moz-linear-gradient(center top , #C0D4E8, #325D88) repeat scroll 0 0 rgba(0, 0, 0, 0);
        border: 1px solid #294C6F;
        box-shadow: 0 0 1px #294C6F inset;
        clear: both;
        color: #FFFFFF;
        height: 37px;
        margin: auto;
        padding: 0;
        text-transform: uppercase;
        width: 1500px;

    Change the line: width: 1500px to
    max-width: 1500px;

    Then add a new line just below it:
    width: 100%;

    The content area (#inner { … } ) is only 1100px wide, so you may just want to change the width: 1500px to width: 1100px.
    Some of your links will fall off the nav bar though. Can you move some of the links as sub links or add the secondary navigation bar, so that you have less links?

    I’m not sure if you are asking about the behavior of responsive themes, but that theme isn’t responsive.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.