Center the Navigation
Permalink Browser Info Environment
Hi!
What a joy to work with your beautiful simple theme in 5.6! I've been mucking about in "Elemental" (5.7) and I can tell you that's like swimming through tar.
To the point. My client has only 4 main menu items (Home/Services/Company/Contact) and I would like to center the nav in the black bar. (soon to be grey bar!) Can you give me any insight as to how I could achieve this? I am a bit concerned about the mobile aspect. The nav bar can stay the same width.
you can take a look here:
http://stagingseydoux2.ch/
but I am working on it so don't get scared!
Any help is welcome.
Cheers
Arlene
What a joy to work with your beautiful simple theme in 5.6! I've been mucking about in "Elemental" (5.7) and I can tell you that's like swimming through tar.
To the point. My client has only 4 main menu items (Home/Services/Company/Contact) and I would like to center the nav in the black bar. (soon to be grey bar!) Can you give me any insight as to how I could achieve this? I am a bit concerned about the mobile aspect. The nav bar can stay the same width.
you can take a look here:
http://stagingseydoux2.ch/
but I am working on it so don't get scared!
Any help is welcome.
Cheers
Arlene
| Type: | Pre-Sale |
|---|---|
| Status: | In Progress |
This seems to be working fine - thank you!
I also adjusted the margin further down by Tablet Main Nav from "0 0 0 37px" to "0 30px"
Hasn't broken it yet...
I also adjusted the margin further down by Tablet Main Nav from "0 0 0 37px" to "0 30px"
Hasn't broken it yet...
/* Tablet (Portrait) 768px ***********************************************************************************************************************/ @media only screen and (min-width: 768px) and (max-width: 959px) { body:after {content: "768 to 959px Tablet Portrait";} .site div.container {width: 768px} /* Main Nav */ .site div#nav ul li a {margin: 0 30px; font-size: 16px;} .site div#nav ul ul {margin: 0 0 0 28px}
Thanks for purchasing the theme, glad you are enjoying it!
So on screen.css in the theme I have changed the list item styles on line 124:
.site div#nav ul li {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
float: none;
list-style: outside none none;
margin: 0;
padding: 0;
position: relative;
z-index: 8;
}
Specifically, I removed the float: left and changed display: block to inline-block.
This seems to work fine when I try it on your site in Firebug, please let me know if it works ok when you apply it to the theme! :)
Thanks
Dave