How to center main menu? knowladgbase example won't work

[Green thumb]

Hi there!

I’ve been playing for days now with CSS and trying to put main menu under the logo and center it.

I’ve managed to place logo on left and main menu under logo. The only problem I’m having now is placing main menu on center. It’s allways placed a little to the left. I’ve attached picture to see what I mean.

Custom css code in general options:

.menu  {
	display: block !important;
	width: 100% !important;
	overflow: hidden !important;
}

.menu ul {
	margin: 80px 0 20px 0 !important;
	padding: .7em !important;
	float: left !important;
	list-style: none !important;
	background: #444 !important;
	background: rgba(0,0,0,.2) !important;
	-moz-border-radius: .5em !important;
	-webkit-border-radius: .5em !important;
	border-radius: .5em !important;    
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset !important;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset !important;
	box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset !important; 
}

.menu li {
	float:left !important;
}

.menu a {
	float:left !important;
	padding: .8em 1.9em !important;
	text-decoration: none !important;
	color: #555 !important;
	text-shadow: 0 1px 0 rgba(255,255,255,.5) !important;
	font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-color: #fff #ccc #999 #eee !important;
	background: #c1c1c1 !important;
	background: -moz-linear-gradient(#f5f5f5, #c1c1c1) !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1)) !important;
	background: -webkit-linear-gradient(#f5f5f5, #c1c1c1) !important;
	background: -o-linear-gradient(#f5f5f5, #c1c1c1) !important;
	background: -ms-linear-gradient(#f5f5f5, #c1c1c1) !important;
	background: linear-gradient(#f5f5f5, #c1c1c1) !important;            
 }

.menu a:hover, nav a:focus {
	outline: 0 !important;
	color: #fff !important;
	text-shadow: 0 1px 0 rgba(0,0,0,.2) !important;
	background: #fac754 !important;
	background: -moz-linear-gradient(#fac754, #f8ac00) !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00)) !important;
	background: -webkit-linear-gradient(#fac754, #f8ac00) !important;
	background: -o-linear-gradient(#fac754, #f8ac00) !important;
	background: -ms-linear-gradient(#fac754, #f8ac00) !important;
	background: linear-gradient(#fac754, #f8ac00) !important;
}

.menu a:active {
	-moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset !important;
	-webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset !important;
	box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset !important;
}

And here is css taken from http://support.swiftideas.net/knowledgebase/how-to-center-the-menu-and-logo/

/* Code for centering logo and menu 
========================*/
/* Full width logo code 
=================*/
/*
#logo {
width: 100%;
}
#logo img, #logo img.retina {
margin: 0 auto;
}
*/

/* Full width menu code 
=================*/
#nav-section {
width: 100%!important;
}
.nav-wrap {
float: none!important;
}
#main-navigation {
float: none;
width: 100%;
height: 48px;
text-align: center;
}
nav .menu li {
float: none;
}

/* Disable the nav search
================= */
#nav-search {
display: none;
}

/* Responsive code 
==================*/
@media only screen and (max-width: 767px) {
#logo img, #logo img.retina {
margin-bottom: 20px;
}
#main-navigation {
width: auto;
height: auto;
text-align: left;
}
}

Is this even possible with responsive and all that? Note that I’ve only edited custom css under general and I had to uncomment some css stuff in main style.css (also attached)

[Green thumb]

This reply has been marked as private.

[Green thumb]

Hi guys, I managed to center menu, but I don’t know how to edit my custom css on general options for theme so I wouldn’t have to modify style.css locally. I belive editing only custom css on general options os prefered way since at updates my styles won’t get overriden by accident.

I’ve attached both files how it looks like with theme and how it looks like if I write code only for menu without any additional css styles.

And second question. Anyone knows how can I edit custom css so when I click on a menu it will stay in that clicked color?

Here is custom css code:

.menu ul {
margin: 5 0 40px 0 !important;
padding: 1.7em !important;
float: left !important;
list-style: none !important;
}

.menu li {
float:left !important;
}

.menu a {
float:left !important;
padding: .2em 0.2em !important;
text-decoration: none !important;
color: #D0822A !important; /* barva pisave */
text-shadow: 0 1px 0 rgba(255,255,255,.5) !important;
letter-spacing: 1px !important;
border-width: 1px !important;
border-style: solid !important;
border-color: #D0822A #FFB73D #D0822A #FFB73D !important;
border-width: 2px !important;
background: #A7255F !important;
background: -moz-linear-gradient(#471025, #A7255F) !important;
background: -webkit-gradient(linear, left top, left bottom, from(#471025), to(#A7255F)) !important;
background: -webkit-linear-gradient(#471025, #A7255F) !important;
background: -o-linear-gradient(#471025, #A7255F) !important;
background: -ms-linear-gradient(#471025, #A7255F) !important;
background: linear-gradient(#471025, #A7255F) !important;
}

.menu a:hover, nav a:focus {
outline: 0 !important;
color: #D0822A !important;
text-shadow: 0 1px 0 rgba(0,0,0,.2) !important;
background: -moz-linear-gradient(#A7255F, #A7255F) !important;
background: -webkit-gradient(linear, left top, left bottom, from(#A7255F), to(#A7255F)) !important;
background: -webkit-linear-gradient(#A7255F, #A7255F) !important;
background: -o-linear-gradient(#A7255F, #A7255F) !important;
background: -ms-linear-gradient(#A7255F, #A7255F) !important;
background: linear-gradient(#A7255F, #A7255F) !important;

}

.menu a:active {
-moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset !important;
-webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset !important;
box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset !important;
}

[Cosmin – SUPPORT]

Hi guys,

If the KB article is too advanced, I suggest hiring someone to help, as theme support unfortunately can’t cover complex customizations. We did the FAQ as many people wanted it, but we simply don’t have the time to check each implementation of this customization manually.

For a menu item to get a color after it’s been clicked, you can use the Color Customizer and set the color for Nav Selected Text Color in the Navigation settings.

Regards,
————————————————————————————————————

Cosmin
Support Assistant

[Green thumb]

Thank you Cosmin,

I managed myself 🙂