Center nav menu

[Tomglover]

Hi there,

I was wondering if you would be able to help me center my man nav menu.

I am trying to make it like the image below (centered and evenly spaced to grid)

http://abab5682.staging-cloud.netregistry.net/

Thanks for your help in advance.

[Mohammad – SUPPORT]

Hi,
Your website is currently in maintenance mode .
Thanks 🙂
With Best Regards
Swift Ideas

[Tomglover]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:

#main-navigation{margin-left:165px !important}
#footer div.textwidget ul.social-icons{width:132px !important}

Thanks 🙂
With Best Regards
Swift Ideas

[Tomglover]

Hi Mohammad,

That worked for the social icons, but it didnt seem to centre the main menu?

Regards,

Tom.

[Mohammad – SUPPORT]

Hi,
Please remove that one css and use this one :

#footer div.textwidget ul.social-icons{width:132px !important}
#main-navigation {float: right;}
#main-navigation{margin-left:165px !important}
div#main-nav div.span9{width:920px !important}
div#main-nav div.span3{width:220px !important}

Thanks 🙂
With Best Regards
Swift Ideas

[Tomglover]

Hi Mohammad,

That code allows for the menu to be centred, however that doesn’t allow the menu to be fully spaced within the grid like the image displayed below.

Regards,

Tom.

[Swift Ideas – Ed]

Hi @Tomglover,

That issue is that you’d need to use a width % for the menu items, and given that they aren’t all the same size you’d likely see overlapping.

Please remove the above code, apologies that was provided – not the best solution. This code is what would work best across all viewports.

#main-nav .row {
position: relative;
}
div#main-nav div.span9 {
width: 100%!important;
}
#main-navigation {
text-align: center;
float: none;
padding-right: 50px;
}
#main-navigation .menu li {
float: none;
}

– Ed

[Tomglover]

Hi @ed

That causes my search and cart icon to sit below the menu (I have attached this image)

Regards,

Tom.

[Swift Ideas – Ed]

Apologies – missed one section of code:

#main-nav .header-right {
position: absolute;
right: 0;
}

– Ed

[navajeremiah]

What would I need to change in the above css to achieve the same centered menu in the Dante theme?

[Swift Ideas – Ed]

@navajeremiah – please log your own topic for this, as it’s not relevant to the Neighborhood topic.

– Ed