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.
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?
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.
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.
