NAavbar Height , Logo Height on tablet and mobile

Support
#1

Hi

I have been looking through the forums and trying to find a solution to an issue with my menu alignment on mobile and tablet view. I have added a lot of code and removed it again and was unable to find a full solution so hopefully someone may be al to offer some advice.

My menu and nav bar look like this on my iPhone :

I am happy with the right alignment of the menu but would like it to be in the centre (height) I was also like the navbar height to be narrower and have the same space as above the logo at the bottom.

I managed to achieve this with code :slight_smile:

This is exactly what I wanted and I think it is perfect however as soon as I turn the phone landscape or view on a. tablet the nabber is then too narrow and also the menu button is at the same as before.

Do I have to find code for each device and landscape and portrait or is there an easy sway for me achieve the look of the second image on all mobile / smaller tablet devices ?

Thanks

#2

Hi,

You can adjust the mobile button alignment under X > Launch > Options > Header > Mobile Button

Then you need reduce your logo size in mobile using the code below.

@media(max-width:480px) {
.x-brand img {
    width: 250px;
}
}

For more information regarding @media kindly refer to the link below

Hope that helps.

#3

Thanks a lot

#4

You’re welcome.