Hello there,
I am currently attempting to make my clients logo appear appealing when looking at it on a mobile browser.
More specifically, I would like the menu hamburger to be stacked on top of the logo while the logo is centred on screen.
I have been able to find and use this code which worked well for centring the logo - but for some reason this only centres the logo when looking at it on the below 979px screen option on my laptops browser. It does not seem to be the same on my mobile browser (where the logo and menu are inline instead). EDIT: I just realised that the logo is only inline on my front page, other pages display it correctly. I hope this is helpful in finding a solution.
@media (max-width: 979px){
.x-navbar {
padding: 8px 0;
}
a.x-brand.img {
float: none;
text-align: center;
}
a#x-btn-navbar {
float: none;
text-align: center;
}
.masthead-inline .x-btn-navbar {
margin-top: 10px;
}
}
I will attach an image below of what I would like it to look like, except for the hamburger which should be on top of the logo.
With Gratitude,
Noah