- This topic is empty.
-
AuthorPosts
-
November 10, 2016 at 6:59 am #247719
sc0twpburgh
ParticipantI 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
November 10, 2016 at 9:24 am #247735tomnoble92
ParticipantHad 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.
November 10, 2016 at 9:37 am #247737sc0twpburgh
ParticipantThanks 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;
}November 10, 2016 at 9:49 am #247738tomnoble92
ParticipantOkay 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.
November 10, 2016 at 10:21 am #247740Beverleyh
ParticipantTested 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 todisplay:block;
tooNovember 10, 2016 at 10:39 am #247742sc0twpburgh
ParticipantThanks. 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.
November 10, 2016 at 10:42 am #247743tomnoble92
ParticipantHave a look at Beverleyh reply she’s had a lot more deeper look at the issue than me.
November 10, 2016 at 10:53 am #247746sc0twpburgh
ParticipantThanks 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?
November 10, 2016 at 12:12 pm #247748Beverleyh
ParticipantUnfortunately 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.