Slider shows underneath under navigation. Need help with CSS.

It’s not a solution, but more of a cheeky ‘hide what is broken fix’ :D. I would like to avoid this solution.

Also: because of this bug, my text isn’t vertically center within the visible part of the slider, you see? So yeah… I’m looking for a solution that lowers the slider so it’s not behind the navigation anymore.

Hi Rikard,

Thanks for the reply. I have tried it and it’s not working.
New fact: It seems like the logo isn’t vertically centered anymore in the navigation. It’s always stuck at the top, no matter the height.

I really believe it’s conflicting with the 3 lines of CSS (to style the topbar) I wrote. Could you take a closer look, please?

If I remove it the navigation is not in front of the slider anymore. But the logo is still vertically aligned at the top of the navigation container, no matter what I do.… I cant imagine it’s because of something I did with my Quick CSS.

If I remove all Quick CSS the logo still isn’t centered. So this gives me reason to believe that there is something wrong with the logo or Enfold… I dont know.

Quick CSS I used:

/* TOPBAR */
#header_meta {
min-height: 55px;
}

#top #header_meta {
background: #a6022e;
}

/* Hide Topbar on mobile */
@media only screen and (max-width: 767px) {
    #header_meta {
        display:none;
    }
}

#top #header_meta li {
border: none;
margin-top: 13px;
margin-left: 25px;
}

#top #header_meta li a {	
color:#ffffff;
font-size: 16px;
font-weight: normal;
}

#top #header_meta li a:hover {	
color:#fafafa;
text-decoration: none;
}

Feel free to log-in and see for yourself. It should be fairly straightforward. The error can be seen on the homepage.

This seems to be a step in the right direction. However it does not show the desired result on mobile. Also the logo remains uncentered.

Maybe it’s not the css I used, but something else? Something with the logo…

Guys,

I really appreciate the help, but this isn’t going anywhere. You’re proposing solutions that don’t fix the issue completely, just partially. This while by default (the default ENFOLD) is as I want it to be.

The desired effect is:
– A navigation that is above, not behind, the slider below
– A logo vertically centered within the navigation

A possible cause is:
– My own Quick CSS which is barely anything. Most likely the CSS I used to edit the topbar, although I’m not sure.

Could somebody please take another look? I honestly thought this would be a quick & easy fix :p.

Private data can be found in the first post.

Hi Victoria,
Thanks for the CSS. It works, however it’s not as smooth as ENFOLD out of the box. I guess it will do for now.
I found out what is pushing the navigation over the photo below. It’s this line of CSS:

/* TOPBAR */
#header_meta {
min-height: 55px;
}

Screenshots of with/without my custom CSS in Quick CSS.

View post on imgur.com

I guess I’m increasing the height of the topbar in a wrong way? Can somebody help me with adding the correct CSS?

Hi Ismael,

It is confusing to me to add this CSS, because I do not know if I need to use the other css from other posts.
I did add your code, cleared cache, and it does not seem to work.

Would you mind taking another look? If it’s easier for you… you have my permission to fix this directly. I have a backup ready :).