Header Logo overlap menu

[Kyle – SUPPORT]

Try this css, it should achieve the same as our screenshot:

@media only screen and (max-width: 1200px) {
#header-section {
  height: 115px;
}
.header-6 #logo, .header-7 #logo {
  position: relative;
  width: 100%;
}
.header-3 #main-navigation div > ul.menu > li:first-child, .header-4 #main-navigation div > ul.menu > li:first-child, .header-5 #main-navigation div > ul.menu > li:first-child, .header-6 #main-navigation div > ul.menu > li:first-child, .header-7 #main-navigation div > ul.menu > li:first-child {
  margin-left: 0;
}
.header-right {
  margin-top: 7px;
}
}

– Kyle

[pixel8edspace]

Not quite there..

[pixel8edspace]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

Please check again, it is working for me now.

– Kyle

[pixel8edspace]

Hi Kyle,

It’s ALMOST there.. The stacking is working correctly when size is reduce, however, when you scroll up/down the menu shadow jumps, there is then extra white space and it repeats below.

If we can fix this, It’s there.

One more annoyance, I wander if you can help. When anything with Royalslider scrolls up, it’s menu goes above the dante menu. Is it possible to force the menu to be the top layer, so this doesn’t happen? I understand if this is out of scope of theme support, but if you knew would be great.

Thx

[Kyle – SUPPORT]

Hi

I’m not seeing the issue you are talking about? Which browser are you using?

For the slider issue add this to your custom css:

.royalSlider {
  z-index: 1;
}

– Kyle

[pixel8edspace]

Hi Kyle,

Safari & Chrome on OS X…. It happens when you scroll the page.

The large white are below the menu only happens after a re=size. It’s fine I can live with that.

Just found another bigger problem. In Firefox, the logo is huge See attached.

Really appreciate all your help trying to solve this.

[Kyle – SUPPORT]

Have you set the height and width of the logo in the theme options?

– Kyle