-
Closed
-
How to set, that main Menu in the header will display in the center of page – like in header No. 5. I use header number 4.
Hi Lukasz,
Are you following this pattern: http://prntscr.com/63nlu5 Please share the site link or the screenshot for further discussion.
Thanks
I’m using this header:
http://img24.otofotki.pl/gv299_Header_menu_1.jpg.html
And I want to the main Menu (marked) will be in the middle of page:
http://img24.otofotki.pl/ov92_Header_menu_2.jpg.html
Hi Lukasz,
Do you want to make like this: http://prntscr.com/64xskb please see the arrow, means menu will be in center while logo will be on left side right?
Please confirm so I can provide you the desired code.
Thanks
Yes. Menu should be in the center, logo should be on the left side, and Search field on the right.
ok, you can use the said header I’ll provide you CSS script to make them in center align on Monday.
Hi Lukasz,
You can use this code in style.css page inside the theme, have to scroll down till 3565 row number if you are using dream weaver or note pad ++
.header-v4 #header{padding:30px 0px;}
.header-v4 #small-nav{border-bottom:1px solid #e1e1e1;}
.header-v4 #nav{float:none;}
.header-v4 #nav > ul{float:none; text-align:center;}
.header-v4 #nav > ul > li,.header-v5 #nav > ul > li > a{float:none;display:inline-block;}
.header-v4 #nav > ul ul{text-align:left;}
.header-v4 #nav ul a, .header-v4 .navigation li.current-menu-ancestor a{border-top:0; padding-top:3px;}
.header-v4 #nav ul .current-menu-parent > a:before, .header-v5 #nav ul .current_page_item > a:before,
.header-v4 #nav ul .current_page_ancestor > a:before, .header-v5 #nav ul .current-menu-item > a:before,
.header-v4 #nav ul .current-menu-ancestor > a:before {background:none!important;}
But you have to comment out this code:
/*
.header-v4 #small-nav{border-bottom:1px solid #e1e1e1;}
.header-v4 #nav{float:left;}
.header-v4 #nav ul a, .header-v4 .navigation li.current-menu-ancestor a{border-top:0; padding-top:3px;}
.header-v4 #nav ul .current-menu-parent > a:before, .header-v4 #nav ul .current_page_item > a:before,
.header-v4 #nav ul .current_page_ancestor > a:before, .header-v4 #nav ul .current-menu-item > a:before,
.header-v4 .navigation li:last-child{padding-right:0;}
*/
Please let me know if it works for you fine, after testing you can see the results here: http://prntscr.com/65oo4g
Please let me know if you need further assistance 😉
Thanks Asad,
I’m inserted your code, but I had to replace > by >
Now it’s look, that work correct.
Thanks Asad,
I’m inserted your code, but I had to replace
> ;
by >
Now it’s look, that work correct.
Your welcome 🙂
I don’t recommend you to copy provided CSS code into style.css because once theme update comes out your style.css file will be overwritten with default theme style.css and your code will be lost.
Rather put this CSS code into Theme Options->Custom CSS and save it, on this way your CSS code will be stored in Theme Options settings and it will not be lost on theme update.
Best Regards
The topic Centered Main Menu in header is closed to new replies