Separating Nav bar into left and right

[awkward_clam]

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:

Suspenders for Men

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!

[WebMachine]

Why don’t you split it into two different unordered lists? Then put a margin between them.

[RyanReese]

Are you after soemthing like a mega dropdown?

Make a Mega Drop-Down Menu with jQuery — SitePoint

[awkward_clam]

Not looking for a mega dropdown. I made the changes that I’m looking for with @WebMachine suggestion. Take a look:

Suspenders for Men

My concern now is that the styling gets weird as the browser size gets smaller. It looks how I want it to look on a big screen. But as you scale the browser down, I’d prefer the two menus to get stacked overtop of one another.

How would you troubleshoot this? The issue is that the right-menu is floated right but on a smaller viewport I would want it to just be in the center

[WebMachine]

Now that you have two separate unordered lists, you should be able to use media queries to customize the styling of the right-hand menu to get it where you want it to be with the smaller browser sizes.

[RyanReese]

As the above user pointed out, you do have a mobile section in your stylesheet (provided by your framework). Feel free to undo the code in the mobile only section.