[adriangregoryParticipant]

Hi

I’m having problems with my navbar on different browser window sizes and mobile. Page is http://www.portsmouthmusicacademy.co.uk/cms.

The logo and menu look great when the window is 1100px or more. However between 979px and 1100px the menu overlaps the logo and the positioning goes weird. So that’s the first problem.

Secondly, when the screen size triggers the mobile menu button to appear (instead of text menu) the height of the navbar is too big – is it possible to specify the height for mobile only.

And finally, is it possible to size the logo (PORTSMOUTH MUSIC ACADEMY) by percentage rather than font size so that it is consistent across different window sizes?

Thank you for your help

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> CSS :

@media (max-width:1100px) and (min-width:979px){
.x-brand{
    font-size: 25px;
}
}

@media (max-width:979px){
.x-navbar-inner {
    min-height: 56px;
}
}

No, If the logo was image it would be possible, but your logo is text.

Hope it helps.

[adriangregoryParticipant]

Thank you. That has helped with the height of the navbar and font size.

Is there a way to make the menu button centred vertically. I’ve set the Mobile Navbar Button Alignment to 15 which looks good on the iphone screen but on tablet size or smaller browser windows the menu button is then too high. I noticed on the X theme homepage the menu button stays consistently centred as the window size changes.

Thanks

[LelyModerator]

Hi There,

You’re welcome.
Please use the following CSS:

.x-btn-navbar {
    margin-top: 10px;
}

Hope this helps.

[adriangregoryParticipant]

Amazing, thank you! So the menu button is now perfectly positioned but what CSS can I use to centre the logo text? On mobile it is right at the bottom of the header bar and on tablets it’s centred but the menu button isn’t. Basically just want the logo text centred with the menu button.

Thanks again

[JoaoModerator]

Hi There

Please add the following code to Appereance Customizer Custom CSS

@media (max-width:500px) {
.x-brand{
 margin-top: 17px;
} } 

@media (max-width:1100px) and (min-width:501px){ {
.x-btn-navbar, .x-btn-navbar.collapsed {
    margin-top: 24px;
} }

Hope that helps

Joao

[adriangregoryParticipant]

Thank you. Almost there! The navbar is looking good now on a mobile phone in portrait but when you go landscape or on tablet or a smaller browser window, the logo text jumps straight up to 32px. I’d like there to be a middle ground so the font size for the logo is increased to, say, 24 for screen widths between 480 and 1100. I’ve tried adjusting the CSS to do this but nothing seems to work.

[Paul RModerator]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 1080px) {
.masthead-inline .x-btn-navbar {
    display: block;
    float: right;
}

    .x-navbar .x-nav-wrap.desktop {
        display:none;
    }
    .x-nav-wrap.mobile.collapse.in {
        display:block !important; 
    }
}

@media only screen and (min-width: 480px)  and (max-device-width: 1100px)  {
a.x-brand.text {
    font-size: 24px;
}
}

Hope that helps.

[adriangregoryParticipant]

Thank you but that doesn’t seem to have worked. It’s picking up font-size 18 up to screen width of 480px then it jumps up to 32 just like it did previously.

[JoaoModerator]

Hi There,

Please try adding the following code:

@media only screen and (min-width: 480px)  and (max-device-width: 1100px)  {
a.x-brand.text {
    font-size: 24px !important;
}
}

If that does not work please provide check your CSS code and make sure you have a closing } for every opening }

If you can´t find an error please provide us your admin crednetials in a private reply

Thanks

Joao

[Author]

Posts