Archived topic
"Custom" navigation layout for tablet, portait only
3 replies · Started by Gabriel on December 29, 2016
Hi,
I'd like to get some advices on how to adjust the navigation layout on tablets in portait mode. You can visit my site: https://splitboardqc.ca/ and resize the window until the screnn is >~1100. You'll see that the site branding and the navigation overlaps. Here's a screenshot in case I'm not explaining well enough : https://cl.ly/311r433p1p1w.
Now what I'd like to do is center the site branding and the navigation when the overlap occur.
Try this CSS:
@media (max-width: 1100px) {
.nav-float-right .inside-header .main-navigation {
float: none;
text-align: center;
}
.inside-navigation {
display: inline-block;
}
.inside-header {
text-align: center;
}
}However, this won't work with the way you title/logo are set up. You might want to merge them into one image file using a program like Photoshop instead of using a logo + HTML.
Tweaked it a bit and it worked A1. Thanks!
You're welcome :)
