Need help? Check out our Support site, then


Menu top border width

  1. I have customized my CSS to get my menu ALMOST where I want it, but I would like the border-top to be 90% width so that it doesn't go over my image. I see how to make it disappear altogether, but I don't know the syntax for a width.

    #nav {
    border-top: none;
    }

    The blog I need help with is desotoeducationfoundation.wordpress.com.

  2. Hi mjmarkey,

    The border-width property controls the thickness of border, not the amount of horizontal space that it takes up.

    A border is applied to an element, in this case your nav, so the border will be the same width as your element. For example, a border-bottom applied to a 90px wide element will always be 90px

    Does this make sense?

    Have a look here for further explanation - https://developer.mozilla.org/en-US/docs/Web/CSS/border-width

    Your theme does not appear to be responsive, so one thing you could possibly try would be to adjust the width of your nav element. For example -

    #nav {width: 86%;}

    Will result in this - http://postimg.org/image/8umr2rvdl/

    The tradeoff is that this will limit the available space in your navigation for new menu items. If you add another menu item your nav will break to 2 lines.

    If that's an acceptable tradeoff then this might be a good fix.

    Hope that helps.

  3. Thank you. Not exactly what I wanted, so I just dropped the border-top.

  4. Hi there, what you might try is to put the border in #site-title and then limit the width of #site-title so that the border doesn't go over your logo. You can give the following a try and see what you think. This also keeps your site title from overlapping your logo when the browser window is narrowed, but when the title goes to two lines, then the menu moves down and into the content area and is obscured.

    #site-title {
        border-bottom: 4px solid;
        width: 85%;
    }

    The above though can be improved further by using the following instead, which uses a Media Query to adjust the width of the site title div again at 936px and below (when the border line starts to overlap the logo. It also adjusts the line spacing so that the menu does not get obscured by the content and sidebar down to the width when the menu goes to two lines. The second media rule at 804px tightens up the menu item spacing so that the menu will not go to two lines as early.

    #site-title {
        border-bottom: 1.5px solid #c03;
        width: 85%;
    }
     @media screen and (max-width: 936px) {
         #site-title a {
             line-height: 40px;
         }
         #site-title {
             width: 80%;
         }
     }
    
    @media screen and (max-width: 804px) {
        #nav a {
            padding: 0 6px
        }
    }

Topic Closed

This topic has been closed to new replies.

About this Topic