Docs

[Reggierood]

Is there by any chance that i can replace the navbar of X Theme to a Ubermenubar because i see that the ubermenubar is on the navbar of theme x.
So if i can make the NAVBAR transparant and the ubermenubar pagewidth its perfect!
See the yellow: http://prnt.sc/ctsm2t

With kind regards!

[Rahul]

Hey There,

Thanks for writing in!

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Reggierood]

http://www.grapelli.nl

[Rupok]

Hi there,

Thanks for the URL. Ubermenu will be placed within the Navbar and it’s usual. If you want to make the Navbar transparent and fullwidth then remove the below code you have added :

.x-navbar {
  background-color: #123;
}

Then place this CSS :

body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: auto !important;
  min-height: auto !important;
}
.x-navbar {
  background-color: transparent !important;
  left: 0;
  position: absolute;
  right: 0;
}

.x-navbar-inner > .x-container.max.width {
  max-width: 100%;
  width: 100%;
}

.x-navbar .ubermenu-main {
  max-width: 100%;
  width: 100%;
}

Hope you are looking for this. If you have any concern let us know and provide a mockup of your desired layout.

Thanks!

[Reggierood]

Hi! Thanks for the reply.

Unfortunately the code doesnt work:( and maybe i need to try to explain different.
The Logo bar needs to stay but the bar under the logobar (navbar) needs to be dark transparent.

with kind regards!

[Joao]

HI There,

At the moment you don´t have a logo bar, You have only a navbar with the logo and the menu.

With this layout it is possible to make the whole navbar black transparent including the part where the logo is placed.

For that please add the following code to Appereance > Customizer > Custom > CSS

.x-navbar {
background-color: rgba(0,0,0,0.3) !important;
}

.ubermenu-main {
    background: none;
    border: none;
}

If you would like to have the logo on a white background and the navigation on a transparent background you need to switch your header to stacked at Appereance > Customizer > Header. And add the code above.

Hope that helps

Joao

[Author]

Posts