Archived topic
Main naviagtion breaking
6 replies · Started by Christopher on July 26, 2017
http://dev-sc-17.info/services/electroplating/chrome/
Hi there, when screen width is under 1250px the main nav breaks onto 2 lines. I have set content width to be max of 95% for screens under 1250px. I can't workout the CSS to keep all the main link on one line before it breaks to nav burger. Can u please give me some help?
Hi there,
Can you try adding this CSS?
.site-logo {
float: left;
}Nope didn't work sorry.
Ever since I added this css it is breaking the nav:
@media (max-width: 1250px)
body .grid-container {
max-width: 95%!important;
}
so what is the best way to bring the content on mobile in from the screen edge and keep the nav from breaking before it triggers to nav burger?
Try this instead:
body .site.grid-container {
max-width: 95%;
}Sorry that new selector doesn't work just puts the content width back to 100%
any other suggestions? I don't understand way the width of the nav container(s) is so short and why can't make the container wider with css?
just worked it out, I copied the specific CSS selector and added:
@media (max-width: 1250px){
#site-navigation > div:nth-child(1){
max-width: 100%!important;
}
}
Glad you got it working :)
