Docs

[afleischer]

I’m working on a site that has a transparent header, and through existing forum threads, I worked out how to move the background image beneath the header, and i’m using an UberMenu (yay new X-addon!) to get the sub-menus to show up horizontally underneath the horizontal main menu. A few questions:

1. Ideally, i’d like both the logo and the Ubermenu centered together (with the logo to the left of the menu). This looks much better with the main website image the client has chosen, along with other images being added to the slider (image below). Right now, I centered the menu and added a left-margin to the logo, which works for the site as it appears on my desktop monitor, but obviously causes issues with responsiveness at any other screen size. Is there a way to center both the logo and menu together, or do I have to use media queries to adjust the logo position for various screens?

2. Right now, i’ve got individual menu items turning white on hover. I’d like the whole navbar to turn white upon hovering over any menu item, what would be the CSS to achieve that?

3. I’d like to add a little bit of space between the logo and the UberMenu (so that the menu background on hover doesn’t butt up against the logo) – i’m thinking it’d be easiest to add some left padding (or margin) to the UberMenu, how would I achieve that?

I’ve created a user login for the site should that help, details below. Thanks in advance for any help!

[afleischer]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in!

1] Please remove your code that adds a left margin to your image logo.

.x-brand img {
    margin-left: 200px;
}

You can make use of this code instead:

@media(min-width: 960px) {
  .x-navbar .x-container.max.width {
    max-width: 100%;
    max-width: 720px;
  }

  .ubermenu-responsive-default.ubermenu {
    float: right;
  }
}

@media(max-width: 959px){
    .ubermenu-responsive-toggle, .ubermenu-sticky-toggle-wrapper {
        float: right;
        margin-top: 30px;
    }
}

2] To highlight the navbar as you hover over it, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar-inner:hover {
    background-color: rgba(255, 255,255, 0.65);
    transition: background-color 0.5s ease;
}

3] if you are using the code from #1, you simply increase the maximum width to have more space between your logo and the menu.

Hope this helps.

[afleischer]

This is perfect, and achieves excactly what I was looking for, thank you, awesome support as always!

One issue: the submenu now overlaps with the header (seen in the pic below, because the logo height is larger than the UmberMenu height I’m assuming). What would the CSS be to move the submenu down a bit, so it appears just below main nav when it’s highlighted? I’ve got the navbar top height set at 110px in the Customizer if that makes a difference. Thanks!

[Rue Nel]

Hello There,

It’s good to know that the code works out for you.

To align the sub menu, you need to update the given code above because we will add a little code to fix the sub menu. You should use this code instead:

@media(min-width: 960px) {
  .x-navbar .x-container.max.width {
    max-width: 100%;
    max-width: 720px;
  }

  .ubermenu-responsive-default.ubermenu {
    float: right;
  }
 
  .ubermenu-transition-slide .ubermenu-item .ubermenu-submenu-drop {
    top: 80px;
  }
}

Hope this helps.

[afleischer]

Perfect, that did the trick, and that .ubermenu-submenu-drop should be a useful target going forward. Thanks again!

[afleischer]

Sorry for the bloating of this thread – another question:

1. I’d like to have separators between the submenu items of the Ubermenu (not the top-level menu items). There doesn’t seem to be an option for this in the Ubermenu settings.

2. The submenu items under “Resources” roll over to a second row, which looks a bit jumbled for this site. Along with sumbenu separators, i’d like to reduce the space between submenu items, and if possible, have the width of the horizontal submenu span the entire width of the logo and main menu together (picture below). Is this do-able?

Current appearance:

Desired appearance (Photoshopped):

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

ul.ubermenu-submenu li a {
    border-right: 1px solid #000 !important;
    padding: 10px 2px !important;
    font-size: 11px;
    letter-spacing: normal !important;
    text-align: center;
}
ul.ubermenu-submenu li:last-child a{
border:none;
}

Hope that helps.

[afleischer]

I figured out how to get the Ubermenu to be the width of the both the logo and menu area together (if anyone uses this thread for this issue) – there’s an option in the “Submenu” section of the Ubermenu settings that lets you set the submenu to “unbounded”, which automatically extends the submenu width to include the logo space.

The code above works, but unfortunately border is always full-height, and that creates the look of uneven boxes:

Is there a different way to create separators that are shorter, like this?:

[Christian]

That is technically possible. Regretfully, further customizations from here would be getting into custom development, which is outside the scope of support we can offer. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[afleischer]

2] To highlight the navbar as you hover over it, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar-inner:hover {
background-color: rgba(255, 255,255, 0.65);
transition: background-color 0.5s ease;
}

This is working great, hovering over the transparent menu makes the background semi-transparent white – is there any way to also have the logo and navigation menu items switch to black on hover to contrast?

[Joao]

Hi There,

To change the logo on hoover since you have an image you have to create an identical image with a different color and add the following code to Appereance Customizer Custom CSS

.x-brand:hover img{
   content: url('yoursite/images/logo2.png');
}

Upon checking your navbar the links change to black when hoovered

Would you mind clarifying what you would like to achieve?

Thanks

Joao

[Author]

Posts