Two navigation menus on desktop, condensed to one in mobile?

[noslenwerd]

Hello… Please see my site below.

http://steelcitycreative.com/industrius/index.html

I need to add another navigation under “company, blog, sign in”. My question is what is the best way to structure this, keeping in mind I want those elements to also show up under one mobile navigation? (they need to be on a line below, with different styling on the desktop site)

Thanks So much!

[RyanReese]

Eh…gonna be difficult. Depends on how you envision it will be laid out on the page. Got a quick mockup? How many menu items? You may end up having to have two menus on separate parts of the structure, hide the 2nd menu on mobile, and the first menu has hidden menu options that are only to be displayed on mobile.

Although I will need to know how this will be laid out before I give final diagnosis.

[noslenwerd]

That is what I had feared. Please see attached for the mockup

[RyanReese]

Ok, this is possible. Follow my instructions.

1. Give #menu width:100%;

2. Reorder your menu items. Put signin first in the HTML, then blog, then company…because…

3. Set the float direction for the menu to float:right (you’ll find this on .sfmenu > li)

4. Make more LIs. Now, on the 4th one you have (e.g. you have signin blog, company, and the new one you make called “random” or whatever. Your HTML should look like this so far. Note that you can obviously change the class name for the last one.

   • Sign In
   • Blog
   • Company
   • Text

5. Add in this CSS. We are setting it to a new line

   #menu li.random
   {
   clear:both;
   }

6. We don’t want the same styling on the anchors that you give those first 3…so do this.

   #menu li:nth-child(1n+4) a
   {
   margin-top:0;
   }

Let’s have that as a starting point.

[noslenwerd]

Awesome…! This is looking great.
Here is what I have so far. I added 3 ‘random’ links, and you can see they stack a bit there

http://steelcitycreative.com/industrius/index2.html

[RyanReese]

I’m not sure you followed all my steps. Please revisit my above post. I’m not seeing some CSS in there that should be there.

Actually step 5 code can be changed to this.

#menu li:nth-child(4)
{
  clear:both;
}

Either way, it seems you ignored steps 5/6.

[noslenwerd]

Weird… I originally did do steps 5 & 6 (in layout.css).

Either way I just implemented the new step 5 code and it looks great! Now I just need to apply some styling.

[RyanReese]

Good luck :).

If you wanted that menu across the entire page you would have been SOL. You luckily were just within the bounds of what we could work in .

[noslenwerd]

Thank you so very much for your help. I remember you helping me on here YEARS ago. You are a true asset to the sitepoint community.