Member Avatar for kimmi_baby

Hi Guys,

I'm currently creating a wordpress theme that has a sticky menu. I've got the basic workings of it. The only problem I'm having is when it snaps to a different position, it isn't quite snapping to the top due to what I believe is to do with the width of the menu. Instead of the bottom of the menu snapping to the top of the section, the top of the navigation is appearing with what seems to be a 20px gap. Does anyone know what I can do to fix this issue? I've attached the CSS below.

#headerwrapper {
width:1500px;
margin: 0 auto !important;  
height:138px;
position:fixed;
background:#212c2e;


}
  • 3 Contributors
  • 2 Replies
  • 237 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Kateryna_1

Recommended Answers

All 2 Replies

Member Avatar for gentlemedia

when it snaps to a different position, it isn't quite snapping to the top due to what I believe is to do with the width of the menu. Instead of the bottom of the menu snapping to the top of the section, the top of the navigation is appearing with what seems to be a 20px gap.

Sotty, but this is all pretty vague and unclear to me! With 'top' do you mean top of the page or top of an HTML element? You want to snap the bottom of the menu to the top of a section??? Can you post a link to the page or at least also the HTML of the menu and such?

Other then that. With the CSS you have for that #headerwrapper it will not center (horizontally), but you must have noticed that, right?
Only margin: 0 auto; on fixed positioned elements is not enough. You will also need left: 0 and right: 0.

#headerwrapper {
    width:1500px;
    margin: 0 auto;  
    height:138px;
    position:fixed;
    left: 0;
    right: 0;
    background:#212c2e;
}
Edited by gentlemedia
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.