Docs

[markwest]

Hi,

I’ve come up with the following CSS, by looking at other posts in the forum –

.x-btn-navbar {
margin: 7px 45% 5px;
width: 51px;
}

This mostly works, but it doesn’t keep the mobile menu icon in the exact middle of the layout – it shifts from left (near desktop size) to the right (small width).

Is there a way to adjust this, or use a different method to keep the mobile menu icon in the exact centre of the viewport width please?

I’ll post site access details in a private post below.

Thanks very much

Mark

[markwest]

This reply has been marked as private.

[Nico]

Hi There,

Thanks for writing in.

Replace this your code

@media (max-width: 1244px)
.x-btn-navbar {
    margin: 7px 45% 5px;;
    width: 51px;
}

In this code below,

@media (max-width: 1244px)
.x-btn-navbar {
    margin-top: 5px;
    width: 51px;
}

Let us know how it goes.

Thanks.

[markwest]

Hi Nico,

Thanks for your reply.

The reason I had the margin set to 45% above is that between 1244px (my breakpoint in media query) and 980px (not sure where this is set?) – without the 45% the mobile nav button sits to the left hand end of the nav bar.

At 980px it jumps to the centre.

I would like the nav button to move to the centre from 1244px please?

Maybe you could let me know where this 980px breakpoint is set so I can change it please? Or how to centre the nav button at 1244px breakpoint?

Thanks

Mark

[Christopher]

Hi there,

Please update this code :

.x-btn-navbar {
display: block;
margin: 0px auto;
}

To :

.x-btn-navbar {
    display: block;
    margin: 0px auto !Important;
}

Hope it helps.

[markwest]

Hi Christopher,

I had to alter that slightly – to add back in the width (otherwise the button appeared full width) and to alter the top margin –

.x-btn-navbar {
display: block;
width: 51px;
margin: 7px auto !Important;
}

But, that is now perfect.

Thanks for your help.

Mark

[Rue Nel]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts