Docs

[zero2fearo]

Hi guys- I understand that this topic has been covered before but I have a few questions…

I found what I believed to be the needed css for this operation in the forum but It does seem to act a bit odd. I have noticed a white outline around the menu, maybe 1px, and my nav-links seem move position when scrolling. Another thing I have noticed is that my sub-menus now open above the nav links.

Also, is there a way to slow down the transition for transparent to solid when scrolling? In this case white. FYI: I have smooth scroll installed currently, but have not found where to edit it’s settings.

I will follow up with login info…

Thx

[zero2fearo]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! I’ll try to cover your questions separately as you have multiple concerns.

#1. I can’t see any white outline. Let’s add a screenshot poiting that.

#2. It changes position because you have added some custom CSS which causing this. Like you have added the bwlo code :

.x-navbar.x-navbar-fixed-top .x-nav > li > a {
  padding-top: 30px !important;
}

You can update this to below :

.x-navbar .x-nav > li > a {
  padding-top: 30px !important;
}

#3. It opens above because you have added the below code :

.x-navbar .desktop .x-nav > li ul {
  top: -15px;
}

I am not really sure why you added this but change this to get expected result. Maybe 15px instead of -15px.

#4. You can add some transition to make it nice :

.x-navbar {
  transition: all 0.3s ease 0s;
}

Hope this helps.

[zero2fearo]

Thank you very much for the help. I believe I have most of this corrected and working well. I do still see the faint outline of the header. Screen cap attached.

[zero2fearo]

.

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

.x-navbar {
border-bottom: none;
box-shadow: none;
}

Hope it helps

Joao

[zero2fearo]

Thank you Joao- That worked perfectly. One more question about this: How do I keep the menu for staying transparent on mobile?

[Rupok]

Hi there,

You can try this code :

@media only screen and (max-width: 979px) {
.x-navbar, .x-navbar.x-navbar-fixed-top {
  background-color: transparent;
}
}

Note that it will show the body background. If you want the image behind that; use this instead :

@media only screen and (max-width: 979px) {
.x-navbar, .x-navbar.x-navbar-fixed-top {
  background-color: transparent;
  position: absolute;
}
}

Thanks!

[zero2fearo]

Thank you Rupok! That first snippet is very close to what I am looking for. Thing only thing I noticed on mobile is that the menu returns to transparent once scrolling has started. Any thoughts or suggestions?

[Rue Nel]

Hello There,

Thanks for the updates! To resolve this issue on mobile, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 979px){
  .x-navbar.x-navbar-fixed-top {
    background-color: white;
    height: auto;
  }
}

Hope this helps.

[zero2fearo]

Thx Rue Nel! That did the trick. Please feel free to close thread.

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts