Docs

[tejinder3011]

Hi,

I am in a developmental stage of a project and am using the Integrity Stack with the Navbar position as Fixed Left.

On a large monitor (desktop) the alignment is fine. However, on tablet the position of the logo and the navbar btn is as in image01 attached. Here you see the navbar btn is on right top. However, I want it to be aligned to the middle of the logo on the righ, i.e I want to push the btn down.

Also, on mobile phone the position of logo and the navbar btn is as in image02 attached. Here the navbar btn is alligned on the bottom right of the logo and is much lower than it should be. It looks a little awkward. I want to move the navbar btn up and towards its left so that it aligns with the bottom center of the logo.

Could you please tell me how I can achieve the above two?

Thanks
Tejinder

[John Ezra]

Hi there,

Thanks for writing in! To assist you with this issue, would you mind providing us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything. Thanks!

[tejinder3011]

Hi,

I am currently working on my local pc. Do we have another way to get a solution to this problem.

Regards,
Tejinder

[Joao]

Hi Tejinder

To resolve the first issue is quite simple.

Go to Appeareance / Customizer / Header / Scroll until you find Mobile Navbar Button Alignment and adjust the pixels.

See img attached.

The second issue is a bit more tricky since we dont have access to your website, so I would like to ask you some extra information. Have you added any custom CSS to your Header, Logo or Navbar? If Yes can you please paste the code you have used so we can have a look to better understand this behavior?

Thanks

Joao

[tejinder3011]

Hi,

Apologies for the late reply.

I have not added any custom CSS anywhere in the code. Please help.

Thanks.
Tejinder

[Lely]

Hello Tejinder,

The issue is because by default the mobile button will display on the right side of the logo. It goes down because the logo is too wide it occupies the entire row. To move it on the center, please add the following CSS on Appearance > Customize > Custom >Edit Global CSS:

@media (max-width:480px){
.x-navbar-inner {
    text-align: center;
}
.masthead-inline .x-btn-navbar {
    float: none;
    display: inline-block;
    margin: 10px auto;
}
}

Hope this helps.

[tejinder3011]

Hi,

This works. Many Thanks.

Warm Regards,
Tejinder

[Joao]

You are welcome.

[Author]

Posts