Hi,
I’m trying to make a simple CSS edit to divide the nav into a ‘left section’ and a ‘right section’. Here is the current website:
Take a look at the nav bar (it’s uniform across the top). I want to add a horizontal gap of blank space between ‘Shop by Color’ and ‘Lookbook’.
<div id="nav">
<ul id="menu">
<li><a href="/" title="Shop all suspenders" class="active">Shop all suspenders
<span class="arrow">∨</span></a>
<ul>
<li><a href="/collections/skinny-suspenders" title="Casual">Casual</a></li>
<li><a href="/collections/" title="Dressy">Dressy</a></li>
<li><a href="/collections/" title="Unique">Unique</a></li>
<li><a href="/collections/" title="Women's">Women's</a></li>
</ul>
</li>
<li><a href="/" title="Shop by features" class="active">Shop by features
<span class="arrow">∨</span></a>
<ul>
<li><a href="/" title="Button suspenders">Button suspenders</a></li>
<li><a href="/" title="Clip suspenders">Clip suspenders</a></li>
<li><a href="/" title="Leather suspenders">Leather suspenders</a></li>
<li><a href="/" title="Skinny suspenders">Skinny suspenders</a></li>
<li><a href="/" title="Wide suspenders">Wide suspenders</a></li>
<li><a href="/" title="Tuxedo suspenders">Tuxedo suspenders</a></li>
<li><a href="/" title="Solid suspenders">Solid suspenders</a></li>
<li><a href="/" title="Stripe suspenders">Stripe suspenders</a></li>
<li><a href="/" title="Pattern suspenders">Pattern suspenders</a></li>
<li><a href="/" title="Celebrity suspenders">Celebrity suspenders</a></li>
<li><a href="/" title="Groomsmen wedding suspenders">Groomsmen wedding suspenders</a></li>
</ul>
</li>
<li><a href="/" title="Shop by color" class="active">Shop by color
<span class="arrow">∨</span></a>
<ul>
<li><a href="/" title="Black">Black</a></li>
<li><a href="/" title="White">White</a></li>
<li><a href="/" title="Red">Red</a></li>
<li><a href="/" title="Green">Green</a></li>
<li><a href="/" title="Blue">Blue</a></li>
<li><a href="/" title="Purple">Purple</a></li>
<li><a href="/" title="Brown">Brown</a></li>
<li><a href="/" title="Beige">Beige</a></li>
<li><a href="/" title="Yellow">Yellow</a></li>
<li><a href="/" title="Pink">Pink</a></li>
<li><a href="/" title="Multicolor">Multicolor</a></li>
</ul>
</li>
<li><a href="/" title="Lookbook" class="active">Lookbook</a></li>
<li><a href="/pages/about-us" title="About">About</a></li>
<li><a href="/pages/contact" title="Contact">Contact</a></li>
<li><a href="#" title="Guides">Guides</a></li>
</ul>
</div>
My initial thought is to just add two <divs>
within the <div id="nav">.
e.g.
<div id="nav">
<div class="left-menu">
<ul class="menu">
<li><a href="/" title="Shop all suspenders" class="active">Shop all suspenders
<span class="arrow">∨</span></a>
<ul>
<li><a href="/collections/skinny-suspenders" title="Casual">Casual</a></li>
<li><a href="/collections/" title="Dressy">Dressy</a></li>
<li><a href="/collections/" title="Unique">Unique</a></li>
<li><a href="/collections/" title="Women's">Women's</a></li>
</ul>
</li>
<li><a href="/" title="Shop by features" class="active">Shop by features
<span class="arrow">∨</span></a>
<ul>
<li><a href="/" title="Button suspenders">Button suspenders</a></li>
<li><a href="/" title="Clip suspenders">Clip suspenders</a></li>
<li><a href="/" title="Leather suspenders">Leather suspenders</a></li>
<li><a href="/" title="Skinny suspenders">Skinny suspenders</a></li>
<li><a href="/" title="Wide suspenders">Wide suspenders</a></li>
<li><a href="/" title="Tuxedo suspenders">Tuxedo suspenders</a></li>
<li><a href="/" title="Solid suspenders">Solid suspenders</a></li>
<li><a href="/" title="Stripe suspenders">Stripe suspenders</a></li>
<li><a href="/" title="Pattern suspenders">Pattern suspenders</a></li>
<li><a href="/" title="Celebrity suspenders">Celebrity suspenders</a></li>
<li><a href="/" title="Groomsmen wedding suspenders">Groomsmen wedding suspenders</a></li>
</ul>
</li>
<li><a href="/" title="Shop by color" class="active">Shop by color
<span class="arrow">∨</span></a>
<ul>
<li><a href="/" title="Black">Black</a></li>
<li><a href="/" title="White">White</a></li>
<li><a href="/" title="Red">Red</a></li>
<li><a href="/" title="Green">Green</a></li>
<li><a href="/" title="Blue">Blue</a></li>
<li><a href="/" title="Purple">Purple</a></li>
<li><a href="/" title="Brown">Brown</a></li>
<li><a href="/" title="Beige">Beige</a></li>
<li><a href="/" title="Yellow">Yellow</a></li>
<li><a href="/" title="Pink">Pink</a></li>
<li><a href="/" title="Multicolor">Multicolor</a></li>
</ul>
</li>
</ul>
</div>
<div class="right-menu">
<ul class="menu">
<li><a href="/" title="Lookbook" class="active">Lookbook</a></li>
<li><a href="/pages/about-us" title="About">About</a></li>
<li><a href="/pages/contact" title="Contact">Contact</a></li>
<li><a href="#" title="Guides">Guides</a></li>
</ul>
</div>
</div>
I thought this would work pretty easily. I would just add a right margin on the left-menu div, display: inline-block, float left/right. . But instead it’s really messing up the styles. The right-menu loses all it’s formatting.
What is the best way to approach this? e.g. How would you normally figure out how to solve an issue like this? I need to learn.
Thanks!