Tweaking UberMenu on desktop

[Adams]

Hello. For dev1.thumbprintbooks.ca, I can’t find out how to do the following:

1. Spacing between top links is too much to show the menu on one line for desktop screens that are 1024px wide. If the space between top links can be reduced, the menu should be able to show on one line.
   You had provided the following CSS to do that when I was using XPro for the navigation menu:
   https://theme.co/apex/forum/t/inline-navigation-menu-not-looking-good-on-devices-1024px-wide/20951/2?u=adams

2. For the menu bar in XPro, I have set the colour to have 90% transparency, i.e., the colour is rgba(11, 7, 5, 0.9), which is the same as #0b0705 with 90% transparency. Is there a way to set the same transparency of 90% for the background color for the UberMenu? Right now the UberMenu main bar background is #0b0705 without any transparency, so it shows as solid black against the slightly lighter bar colour. In UberMenu style customizations I tried clearing the menu bar background color for desktop (i.e., the upper color of the two), but that didn’t work. It just set the first color to #0b0705 and the second color to the default. I want the second colour to be #0b0705 for the background on mobile.

3. Is there a way to increase letter spacing for top links in UberMenu? When I was using XPro for the navigation menu, I was able to specify 0.08em which spread them out a bit.

4. I can’t figure out how to change the white thin line between the top menu and the submenu to the colour #0b0705 to match the other three borders of the submenu for Portfolio.

[rad]

Hi there,

Thanks for writing in.

1. It starts breaking into multiple lines from 1230px and below. Perhaps what you need is responsive padding. Please add this CSS to your global custom CSS.

@media ( min-width: 1012px ) and  ( max-width: 1230px ) {
.ubermenu .ubermenu-colgroup .ubermenu-column, .ubermenu .ubermenu-custom-content-padded, .ubermenu .ubermenu-nonlink, .ubermenu .ubermenu-retractor, .ubermenu .ubermenu-submenu-padded, .ubermenu .ubermenu-submenu-type-stack>.ubermenu-item-normal>.ubermenu-target, .ubermenu .ubermenu-target, .ubermenu .ubermenu-widget, .ubermenu-responsive-toggle {
    padding: 15px 1vw !important;
}
}
@media ( min-width: 980px ) and  ( max-width: 1011px ) {
.ubermenu .ubermenu-colgroup .ubermenu-column, .ubermenu .ubermenu-custom-content-padded, .ubermenu .ubermenu-nonlink, .ubermenu .ubermenu-retractor, .ubermenu .ubermenu-submenu-padded, .ubermenu .ubermenu-submenu-type-stack>.ubermenu-item-normal>.ubermenu-target, .ubermenu .ubermenu-target, .ubermenu .ubermenu-widget, .ubermenu-responsive-toggle {
    padding: 15px 0.8vw !important;
}
}

2. You can add this CSS as well,

.ubermenu-main {
    background-color: rgba(11, 7, 5, 0.9) !important;
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(11, 7, 5, 0.9)),to(rgba(11, 7, 5, 0.9)))  !important;
    background: -webkit-linear-gradient(top,rgba(11, 7, 5, 0.9),rgba(11, 7, 5, 0.9))  !important;
    background: -moz-linear-gradient(top,#0b0705,#0b0705)  !important;
    background: -ms-linear-gradient(top,#0b0705,#0b0705)  !important;
    background: -o-linear-gradient(top,#0b0705,#0b0705)  !important;
    background: linear-gradient(top,#0b0705,#0b0705)  !important;
}

3. And this CSS as well,

.ubermenu .ubermenu-colgroup .ubermenu-column, .ubermenu .ubermenu-custom-content-padded, .ubermenu .ubermenu-nonlink, .ubermenu .ubermenu-retractor, .ubermenu .ubermenu-submenu-padded, .ubermenu .ubermenu-submenu-type-stack>.ubermenu-item-normal>.ubermenu-target, .ubermenu .ubermenu-target, .ubermenu .ubermenu-widget, .ubermenu-responsive-toggle {
    letter-spacing: 5px;
}

And please note that this is connected to #1 issue (spacing), adding letter spacing will increase the width of the menu too, hence, #1 will be useless of you increase the letter spacing, unless you’ll modify the #1 CSS and decrease the 1vw and 0.8vw value.

4. And this CSS as well,

.ubermenu-main .ubermenu-submenu.ubermenu-submenu-drop {
    border: 1px solid #0b0705 !important;
}

You may enhance all given CSS, but keep in mind that each one could affect each other and will render them non-functional. What I gave are just based on your requested changes (except #3, it will nullify the #1 fix).

Thanks!

[Adams]

Those worked, except for #2—and I suppose I can live without the transparency for the UberMenu if that’s not possible. I tried the CSS for #2 without any of the other CSS changes, and it didn’t seem to affect the transparency for the UberMenu. If transparency for the UberMenu can’t be set, then I’ll remove the transparency for the main bar.

Am I EVER IMPRESSED with the way X Pro has been configured, the refinements that can be done with it, and the level of support offered! By far the BEST theme I’ve worked with so far! Kudos!

One further refinement…It seems that the for desktop 1230px and below, the spacing ignores the space needed for the subindicator. So on dev1.thumbprintbooks.ca, the space between the top links Portfolio and Process ignores the subindicator to the right of Portfolio. Is there a way to correct this?

[ruenel]

Hello There,

For your sub indicator and give it enough space, please have the code updated and use this:

@media ( min-width: 1012px ) and  ( max-width: 1230px ) {
    .ubermenu .ubermenu-colgroup .ubermenu-column, .ubermenu .ubermenu-custom-content-padded, .ubermenu .ubermenu-nonlink, .ubermenu .ubermenu-retractor, .ubermenu .ubermenu-submenu-padded, .ubermenu .ubermenu-submenu-type-stack>.ubermenu-item-normal>.ubermenu-target, .ubermenu .ubermenu-target, .ubermenu .ubermenu-widget, .ubermenu-responsive-toggle {
        padding: 15px 1vw !important;
    }
    .ubermenu-items-align-left.ubermenu-horizontal .ubermenu-item.ubermenu-item-has-children, 
    .ubermenu.ubermenu-horizontal .ubermenu-item.ubermenu-item-has-children {
        margin-right: 20px;
    }
}
@media ( min-width: 980px ) and  ( max-width: 1011px ) {
    .ubermenu .ubermenu-colgroup .ubermenu-column, .ubermenu .ubermenu-custom-content-padded, .ubermenu .ubermenu-nonlink, .ubermenu .ubermenu-retractor, .ubermenu .ubermenu-submenu-padded, .ubermenu .ubermenu-submenu-type-stack>.ubermenu-item-normal>.ubermenu-target, .ubermenu .ubermenu-target, .ubermenu .ubermenu-widget, .ubermenu-responsive-toggle {
        padding: 15px 0.8vw !important;
    }
    .ubermenu-items-align-left.ubermenu-horizontal .ubermenu-item.ubermenu-item-has-children, 
    .ubermenu.ubermenu-horizontal .ubermenu-item.ubermenu-item-has-children {
        margin-right: 20px;
    }
}

Hope this helps.

[Adams]

Thanks a bunch! I was able to modify a couple of the measurements so the menu fits on a line.

[christian]

You’re welcome.