Menu icon Foundation
Top Nav Positioned with Social Icons Above

I need a top nav bar that does the following :

>> centered logo on left
>> top of right side contains phone # and social icons
>> bottom (under this social icons / phone # ) is the nav bar containing menu
>> when mobile , the top social icons and phone # disappear and usual hamburger menu icon

I just cant get this right

topbarcustom top-bar

I need a top nav bar that does the following :

>> centered logo on left
>> top of right side contains phone # and social icons
>> bottom (under this social icons / phone # ) is the nav bar containing menu
>> when mobile , the top social icons and phone # disappear and usual hamburger menu icon

I just cant get this right

Rafi Benkual over 4 years ago

This should help you get started http://codepen.io/rafibomb/pen/eNzVaK

Tom Huben over 4 years ago

Rafi, Thank you! I feel i am close ... missing something

www.huben.com/south

when i close for mobile , everything moves and doesn't condense. no menu icon

any help appreciated .. i have tried and tried - gotta be css i am guessing

Tom Huben over 4 years ago

Rafi! I got most working. I think the Logo is really an issue... trying to figure that out. maybe i need a different logo when going small screen idk. The logo kind of hangs over the underneath div etc etc

Tom Huben over 4 years ago

also my mobile menu doesnt seem to work... it now shows up - not sure why when clicked i get nothing

Rafi Benkual over 4 years ago

You're image needs to be shrunk down to fit on small

@media only screen and (max-width: 767px)
.logoimg {
  width: 100px;
}

Also, try moving your jQuery script above foundation.min.js. The page is read in order and foundation uses jQuery to create functions.