Header Menu CSS not playing ball

[sc0twpburgh]

I have designed this website here for a client:

http://www.tanartherapies.co.uk/

The menu loads perfectly on desktop and on large displays. It also loads fine on mobile devices. We have a mobile menu in place (burger menu).

The problem rests with smaller laptop screens. Not sure on exact size. But if you decrease your size of the browser, you’ll see the menu skips onto a 2nd line. The “Contact Us” section moves down. I essentially need the menu to change in to the mobile menu a little earlier. I’ve tried adding various CSS to do, but it’s not happening.

Any help greatly appreciated. Thanks, Blair

[tomnoble92]

Had a quick look at it, the <li> are too big for the container so it skips to the second line.

You can adjust the size for the <li> so it fits on until the media query kicks in and changes the menu to mobile.

Or you could increase the media query to 1200px width so the contact us doesn’t break and it goes into mobile menu at a larger screen size.

I would recommend option 1 though.

Just lower the padding on the object and decrease the font size a tad.

[sc0twpburgh]

Thanks Tom. Should have mentioned I’ve tried reducing the padding previously. But the side of the menu needs to fit in with the text below. So be full width essentially. This is the CSS part below doing the work of the padding etc:

#navigation a {
padding-right: 83px;
padding-top: 11px;
padding-bottom: 11px;
padding-left: 83px;
background-color: #b9bbaa;
margin-right: 3px;
margin-left: 3px;
}

[tomnoble92]

Okay well on the inspector this CSS seems to work and keep the menu inline with the body text.

#navigation a {
padding: 11px 55px 11px 55px
background-color: #b9bbaa;
margin: 0 3px 0 3px;
}

#navigation .menu>ul>li:last-child a {
padding-right: 55px;
}

Give that a whirl.

[Beverleyh]

Tested and working in Dev Tools…

Set a max-width of 1160px on ‘.style2 .menu’, and then in the max-width:1279px to min-width:960px media query, set a max-width of 940px (to match with the ‘.be-wrap’ content wrapper underneath). Also set it to display:block; and give it a left and right margin of auto. The left float is not needed.

Make the menu’s <li> elements 25% wide.

Remove all the left and right paddings completely from all the menu’s <a> elements. There are some last-child declarations to tackle individually. And set them to display:block; too

[sc0twpburgh]

Thanks. This section below makes the menu background disappear completely for some reason. So the beow:

#navigation a {
padding: 11px 55px 11px 55px
background-color: #b9bbaa;
margin: 0 3px 0 3px;
}

Which makes no sense to me….. Also menu to central and not matching up with main body width as it should. Have reverted back to original CSS for now. Thanks.

[tomnoble92]

Have a look at Beverleyh reply she’s had a lot more deeper look at the issue than me.

[sc0twpburgh]

Thanks for the feedback Beverley. You’ve lost me in a few places though sorry…. This is the code (relevant) I have now:

#navigation a {
padding-right: 83px;
padding-top: 11px;
padding-bottom: 11px;
padding-left: 83px;
background-color: #b9bbaa;
margin-right: 3px;
margin-left: 3px;
}

#navigation .menu > ul > li:last-child a {
padding-right: 80px;
display: block;
}

.style2 .menu {
max-width: 1160px
}

@media only screen and (max-width: 1279px) {
#navigation .menu > ul > li.mega > ul.sub-menu {
width: 974px;
max-width: 940px;
display: block;
margin-left: auto;
margin-right: auto;
}
}

Is that in the right direction?

[Beverleyh]

Unfortunately I can’t look at anything at the mo because I’m on mobile again, but you can open up the developer toolbar to check where and what to change. That’s F12 in most browsers. You can drill down the HTML in the elements pane (bottom left) until you reach your menu. From memory, it’s a ul wrapped in a div – the div has the class “menu”. Select the div and check the styles pane on the right side of the screen. There you can disable existing styles and add new ones live in the browser (that’s what I did to find the pertinent parts earlier). You’ll also be able to see which stylesheets your declarations are stored in. If I remember correctly, your styles (affecting the menu) are currently divided amongst a layout.css file and a styles.css file. You might be able to edit these stylesheets directly or create overrides in a custom stylesheet. The styles pane will give you the appropriate selectors needed in order to find the existing declarations, or to target the specific elements when you create the overrides. Hope that helps.

[Author]

Posts