Problem with NavBar on mobile


I’m in the middle of creating a website and for the love of god - I’m not able to center the Nav Bar Items on the mobile version…

It should look like this (tablet):

instead it looks like this:

What am I doing wrong? honestly with all these divs and sections and stuff I lost the overview…

Here is my site Read-Only:

1 Like

Hi @r.lazzeri ,

In the tablet viewport, set Navbar Band Three position to auto on the left side (currently 240) and set the Sizing in the Flex Child tab to the second one (grow if possible).

Move inside to the Heading 2 and text align it to center.

Move down to the mobile landscape and set the width of Menu Button 2 to Auto (currently 100%). You can also align this to Center from the Flex Child tab.

Select Navbar Brand Three and align this to the center as well.

This should give you a pixel perfect navbar. Let me know if you still need help.



1 Like

oh this worked quite well, thank you!
It just seems that the Heading (Houses of Kenya) is still a little bit off center? I would like to have it centered by ignoring the drop down menu on the right. Currently the menu takes up some space which causes the Heading to be off centered, right?

I hope I explained myself correctly… :see_no_evil:

I think I understand,

In the tablet viewport, select Menu button 2 and set Position to Absolute. Put 0 margin on the right and set z-index to 6 (so it can be on top of everything else).

Everything should trickle down to mobile landscape and portrait.

Let me know if you achieve the desired outcome.

1 Like

Works like a charm - thank you so much!
I’m always surprised that it’s so easy when you know the right steps…
Would you mind helping me one last time?

The footer on the Desktop view (and below) should somewhat look like this:

I guess it’s a matter of choosing the right options again…


Let’s start with the section. Set this to position Static and only set let’s say 81 padding on the top.

On the container, clear all the spacing formatting that you have (on the container and children). Make a div and put the address and privacy inside as seen in the pic. I gave the title left-align and 54 margin bottom.

The new div should be set to Flex and horizontal. Put some margin on the privacy paragraph (I did 108).

The last thing is to position the image. Make sure the file order in the Navigator is kept so it doesn’t come on top of the text. Set the image to position Absolute relative to the container and add some spacing to the right until it reaches your position.

This will work for desktop only. You have to rearrange the footer for tablet and mobile.

I would not recommend having e-mail, address and phone no in the same paragraph as it will be difficult to manage in smaller viewports.

1 Like

I followed your instructions but I guess I missed something…It doesn’t look like it should :see_no_evil:

Privacy paragraph set to position static and move the 108 margin from top to left.

Container 8 set to flexbox - vertical and aligned to the left.

This should get you close to the end result. Let me know if you still need help

1 Like

Perfect, thank you for your time!