Sticky Logo width

[Markus]

Markus

March 18, 2017 at 7:45 am

Hi Kadence team!

I need some assistance with the header layout on my website: http://www.aikido-zentrum-offenbach.de

I use the basic header with shrink for sticky, which works fine for desktop screens. However, since my logo is pretty wide (because of the rasterized text) it has some overlap issues with the mobile menu smaller screens (portrait mode).

So here my questions:

1. I use the following CSS to have the sticky transparent.

`header#kad-banner {
opacity: .9;}`

This made the menu disappear behind my sliders, so I use the following as a workaround (found on the forum):

`#kad-shrinkheader, #kad-banner-sticky-wrapper {
z-index: 10000;
position: relative; }`

Is this still recommended?

2. A more severe issue is that on screen widths of smaller than 991px the design switches to a mobile menu (right?) but tries to put it on the same row as the logo. his happens for sreen widths of 767-991 px. Unfortunately it the menu and the logo overlap partially with the logo placed in front of the menu?For smaller screens it puts the menu below the logo and it is working again.

3. A related issue happens on my Samsung Tablet (Galaxy SM-P600) in portrait mode where I see the mobile menu but cant click on it. (Maybe it is hidden behind the slider, but I can’t tell.)

3. I would like to have the logo wider on the desktop screen (before shrinking). I tried to force it to a width, but that broke the responsiveness :). Any more elegant way to do this? I would also prefer to have the shrinked version a little larger.

4. I tried to get the mobile menu sticky as well, but this broke the menu function (maybe because of the transparency?). How would I do this?

And by the way: AMAZING Theme! Good work!

Cheers,

Markus