Docs

[Reggierood]

Hi.

I want to know how i can make sure that only the navbar would be visible when i scroll down.
Right now the logo + navbar stays on top.

link: http://www.grapelli.nl/

With kind regards

[Reggierood]

Oh i fixed it when i pressed:

Layout
Inline
Stacked <<

Is there still an option to put my logo at the left?

[Thai]

Hi There,

Please add the following CSS:

nav#ubermenu-main-50-primary {
    display: inline-block !important;
    margin-top: 45px;
}

Hope it helps 🙂

[Reggierood]

Nice.
Then i want to know
On my other website: http://www.rbrood.nl/rbrood. i want to have a dark transparant header.
If you shrink the page (smaller) you will see that the menu button appears to be with a rgba (0,0,0,0.5) but i want to have that also with the regular button. (its now grey..)

With kind regards

[Joao]

Hi There,

Your header is static at the moment on : http://www.rbrood.nl/rbrood

Would you mind to provide more detailas about what you are trying to achieve, I am a bit confused .

Thanks

Joao

[Reggierood]

this is the example i need to achieve: http://www.tripwiremagazine.com/wp-content/uploads/2012/06/go4_thumb.jpg

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

@media (min-width: 969px) {
.home body {
        margin-top: -60px;
} }

Hope that helps

Joao

[Reggierood]

Hi.

It doesnt work. This is the code right now:

.x-navbar {
    position: absolute;
    width: 100%;
    top: 0;
    background-color: rgba(0, 0, 0,0.5);
    box-shadow: none;
    border-bottom: none;
}

body {
  background-color: rgba(0, 0, 0,0.5);
 @media (min-width: 969px) {
   
.home body {
        margin-top: -60px;
} }

What you can see is that x-navbar has a background-color of 0,5.
It only shows this color when the webpage is smaller: http://prnt.sc/dpv75t
If the page is like normal size, then its grey: http://prnt.sc/dpv6tz and it should be this 0,5

[Joao]

Hi There,

There is a missing : }

after :

body {
  background-color: rgba(0, 0, 0,0.5);

Please update your code to:

.x-navbar {
    position: absolute;
    width: 100%;
    top: 0;
    background-color: rgba(0, 0, 0,0.5);
    box-shadow: none;
    border-bottom: none;
}

body {
  background-color: rgba(0, 0, 0,0.5);

}
 
@media (min-width: 969px) {
   
.home body {
        margin-top: -60px;
} }

Hope that helps,

Joao

[Reggierood]

Thanks for this code!

[Reggierood]

Hi!

It didnt work but i asked the same question on facebook xtheme users and i got a solution

CSS CODE:

.x-logobar{
display:none;
}

.x-navbar .desktop .x-nav > li > a {
color:#fff;
padding-top: 25px;
}

.x-navbar:not(.x-navbar-fixed-top) {
background: transparent !important;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
color:#000;
}

.home .masthead{
height: 0px;
}`

and Javascript

jQuery(document).ready(function($){
$(window).scroll(function(){
if ( $(this).scrollTop() == 0 ) {
$(‘.x-navbar’).removeClass(‘x-navbar-fixed-top’);
}
});
});

Thanks!

[Reggierood]

I cannot edit my previous post.
It was ment for another post regadering the same

[Rue Nel]

Hello There,

Thanks for sharing the solution. We’re just glad that the Facebook User group was able to help you.
If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.

[Author]

Posts