How do I centralise the main menu?

trevorellis

I am using the Uber template and want to centralise the main menu bar. At the moment, it is positioned more to the left and I want it to be aligned to the centre. What code can I put in the custom.css? Any help would be greatly appreciated.

pavit

Hi trevorellis

You can add a margin-left value as below

.t3-mainnav {
margin-left:50px;
}

Hope it helps

trevorellis

pavit Thanks for the speed of your reply. I'm sorry but that code has not achieved the effect that I want. I need it so that the main menu bar is centralised and that it remains centralised when it adapts to different screen sizes and resolutions. I have attached two images. Image01Current is what the website currently look likes and Image02Future is what I want it to look like. Any code that can help me achieve the look of the second image would be greatly appreciated. I might also require code to centralise the header graphic. Thanks in advance.

aman204

trevorellis Try add this to custom.css file :

.t3-mainnav{margin-right: auto !important;width: 60% !important; /*adjust value accordingly*/float: none !important;}
.carousel-inner > .item > img{margin-left:auto !important;margin-right: auto !important;}

Kindly ensure to clear your browser cache if changes dont reflect.

trevorellis

aman204 Thanks, we have been able to sort the problem with a few tweaks to your code:

.uber-header.highlight-color .logo {
  display: none;
}

.t3-mainnav{margin-right: auto !important; margin-left:auto !important; width: 60% !important; float: none !important;}
.carousel-inner > .item > img{margin-left:auto !important;margin-right: auto !important;}