Hi there – it’s pretty hard to help with CSS without being able to see the site live, but I fooled around on a twentytwelve test site and it looks like this CSS will make a space between the menu items:
@media screen and (min-width: 960px) {
.main-navigation li.page-item-25 {
margin-right: 100px;
}
}
You’ll need to find the page-item-NUMBER of the page/menu item you want to put the margin on.
Also, see that for twentytwelve you have to put it in media query in order for it to work on a regular screen.
Are you using a browser tool such as Firebug? It’s immensely helpful for working with CSS.
Hi Thanks for the reply 🙂
Sorry about being late getting back to you.
Yes i’m using firebug, very handy.
Cool thanks for that info i’ll try that, Any idea where to find page-item-#’s ?
I’m sure i’ll find them, will let you know how i go. Thanks agian
Works great thanks!!
Run into a slight issue though. I have no CSS Class for ‘Home’ because of that, no page # to direct to. I cannot assign it within the CSS Menu CSS Classes option so i’m trying to write a bit of code to assign it a CSS Class, any help?
Thx
What does the generated HTML code look like on your home page – a twentytwelve site should be something like:
<body class="home blog custom-background custom-font-enabled single-author">
So then you can use this in your CSS selectors:
body.home other selectors here {
styles here;
}
If you don’t have something like that, something must have been majorly edited in your child theme…
Hi, It looks like this;
<body class="blog logged-in admin-bar custom-font-enabled single-author customize-support">
and my nav.menu generated looks like this ;
<div class="nav-menu">
<ul>
<li>
<li class="page_item page-item-5">
<li class="page_item page-item-7">
<li class="page_item page-item-9">
<li class="page_item page-item-6">
<li class="page_item page-item-8">
<li> being the home with no class
Thank you for the info, Sorry i’m a newb though i’m trying to learn as fast as I can, could you please give me an example of a completed;
body.home other selectors here {
styles here;
}
Something like..;
body.home a.href="Home" {
Class: page-item-#
}
?
Thank you ! 🙂
I’d just like to adjust the margin of the first ‘Home’ Menu item or alternatively shift the entire menu text along to the right a bit about 100px…
I can’t seem to find a way to this without creating margins between each menu item… Still trying though. Sorry for double post.
I did it! woohoo.
At first I was able to move the whole menu to the right a bit, using the left CSS command under .main.nav li.
Then I played around with the menu a bit, assigned each Item CSS Classes, and for some reason it turned my ‘page-items’ into ‘menu-items’
So currently my HTML reads;
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle">Menu</h3>
<a class="assistive-text" href="#content" title="Skip to content">Skip to content</a>
<div class="menu-menu-container">
<ul id="menu-menu" class="nav-menu">
<li id="menu-item-16" class="HOME menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-16">
<li id="menu-item-14" class="ABOUT menu-item menu-item-type-post_type menu-item-object-page menu-item-14">
<li id="menu-item-13" class="RESEARCH menu-item menu-item-type-post_type menu-item-object-page menu-item-13">
<li id="menu-item-12" class="COACHING menu-item menu-item-type-post_type menu-item-object-page menu-item-12">
<li id="menu-item-11" class="RESOURCES menu-item menu-item-type-post_type menu-item-object-page menu-item-11">
<li id="menu-item-10" class="CONTACTUS menu-item menu-item-type-post_type menu-item-object-page menu-item-10">
And my CSS to modify the placings;
@media screen and (min-width: 950px) {
.main-navigation li.menu-item-16 {
margin-left: 110px;
}
.main-navigation li.menu-item-14 {
margin-left: 15px;
}
.main-navigation li.menu-item-13 {
margin-left: 11px;
}
.main-navigation li.menu-item-12 {
margin-left: 186px;
}
.main-navigation li.menu-item-11 {
margin-left: 0px;
}
.main-navigation li.menu-item-10 {
margin-left: 0px;
}
}
All displaying perfectly now
Thank you very much for your help 🙂
Marked as resolved, Thanks
Hello,
I have a big issue with my second menu navigation displaying. My Menu items are packed without space between them !
What can I do ? Where is my error ?
This is my website : http://glanceblog.com/
I’m stuck ! If someone can help me, i’ll be super grateful !!
Hello,
I have a big issue with my second menu navigation displaying. My Menu items are packed without space between them !
What can I do ? Where is my error ?
This is my website : http://glanceblog.com/
I’m stuck ! If someone can help me, i’ll be super grateful !!
