Menu icon Foundation
Fixing top bar

I am using foundation 4. I'm looking to have the logo on the left side and my links on the right side and when in mobile view have the menu appear underneath...like how top bar currently works but for some reason my logo image gets cut off when im using top bar because of the fixed height

for example here is the page im working on: http://www.tel3.com/temp/main-new.jsp im using top bar. My logo is outside of the top bar and in the small view the logo gets cut off. How do I edit the top bar so that my logo is within the top bar in large view and not being cut off in small view?

Thank you.

topbarfixed

I am using foundation 4. I'm looking to have the logo on the left side and my links on the right side and when in mobile view have the menu appear underneath...like how top bar currently works but for some reason my logo image gets cut off when im using top bar because of the fixed height

for example here is the page im working on: http://www.tel3.com/temp/main-new.jsp im using top bar. My logo is outside of the top bar and in the small view the logo gets cut off. How do I edit the top bar so that my logo is within the top bar in large view and not being cut off in small view?

Thank you.


Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Hey Sophia!

Apply these CSS rules to the image:

img
{
  position: relative; /* Anything not static will do */
  z-index: 99; /* Any number higher than the z-index of the topbar and any other elements will do */
}

To change the height of the topbar you will need this in CSS:

nav.top-bar *
{
  height: 88px; /* the height of your logo */
}

I would take care using the above. As the top-bar has so many children setting the height of every child to 88px might have some undesired effect. As I am not able to test exactly which elements should have a height of 88px I have selected all the children of nav.top-bar.

If you use SCSS that's great! In _topbar.scss, change the height defined in line 18 to 88px. Or change line 1134 of _settings.scss if you make your SCSS changes in there.

Wing-Hou Chan over 5 years ago

Hey Sophia!

Apply these CSS rules to the image:

img
{
  position: relative; /* Anything not static will do */
  z-index: 99; /* Any number higher than the z-index of the topbar and any other elements will do */
}

To change the height of the topbar you will need this in CSS:

nav.top-bar *
{
  height: 88px; /* the height of your logo */
}

I would take care using the above. As the top-bar has so many children setting the height of every child to 88px might have some undesired effect. As I am not able to test exactly which elements should have a height of 88px I have selected all the children of nav.top-bar.

If you use SCSS that's great! In _topbar.scss, change the height defined in line 18 to 88px. Or change line 1134 of _settings.scss if you make your SCSS changes in there.

Sophia Taveras over 5 years ago

thank you!!!