Site logo

Archived topic

Border bottom width gap

3 replies · Started by Richard on August 2, 2017

Viewing posts 1–4 of 4

Hi Guys,

Two quick questions:

First, regarding the border-bottom line underneath my primary navigation.

I’d like to make sure there’s a little gap at either side when shrinking the overall screen size:

my domain: http://www.acousticpercussion.com

If you gradually shrink the size of the screen you’ll see the pictures have a gap between either side of the screen but the border-bottom line continues right across. I’ve set the container width to a specific width but the line seems to have its own setting. I can’t figure out how to alter this.

Second, is it possible to adjust the height of the just primary menu. I can’t quite line the menu up with the middle of the company logo. I can only seem to adjust the ‘menu item height’ but the only changes the size of the logo. Is there any way of independently adjusting the height on the primary menu without changing the height of the logo?

Hope all of that made sense!

All best,

Richard – UK

Hi there,

Sorry for not getting back to you sooner!

1. Tough question! You could try something like this:

@media (max-width:1225px) {
    #site-navigation {
        margin:0 15px;
    }
}

2. You can adjust it with CSS:

.main-navigation .main-nav ul li a, 
.menu-toggle, 
.main-navigation .mobile-bar-items a {
    line-height: 75px;
}

Thanks Tom - seems to have done the trick!

All best,

Richard

Glad I could help :)

This archived topic is closed to new replies.