Site css not being applied on pages for x.brand

[wbc]

Hi,

Ive set up the following css in the theme css, but on each page the brand sizing isnt being applied. Am I right to assume that css defined at site level should apply to all pages? If so, why isnt this working?

.x-brand {
width : 30vh!important;
}

/* This is when were in tablet mode */
@media screen and (min-width: 800px) {
.x-brand {
width :40vh!important;
}
}

/* This is in phone width mode */
@media screen and (min-width: 400px) {

.x-brand {
width : 50vh!important;
}
}

The site is https://dev.cloudcompare.io

Thanks for your help.

W

[rad]

Hi Will,

Thanks for reaching out.

It appears to be optimized and minified, I can’t find where the CSS is added. Make sure it’s added to Theme Options > CSS to make it global instead to builder’s CSS.

And please try the VW unit instead of VH, example width :40vw!important;.

Thanks!

[wbc]

Thanks with lots of time fiddling I got it working. I had to move the media queries to the bottom of the CSS chain.

The ubermenu submenu in responsive. Im trying to make it full screen with a black background. Where would I set that in ubermenu? I cant see any options for it under responsive settings and cant see any CSS on their site to help.

Thanks.

[rad]

Hi Will,

I’m not sure what you mean by full-screen, there is a logo beside it so setting it to full-width will stack them together. And there is no sub-menu, are you referring to mobile menu? It’s not possible to have full-width since Ubermenu has its own configuration. But please add this to Theme Options > CSS for the background color.

@media screen and (max-width: 959px) {
.ubermenu-responsive-default.ubermenu-responsive.ubermenu {
 background: #000 !important;
}
}

Thanks!

[wbc]

Thanks that worked.

[paul.r]

You’re most welcome Will!

[wbc]

Sorry, last thing I’m struggling with is the underline styling. I want to create a solid 2px line under the selected and hover menu item.

https://dev.cloudcompare.io

I’ve added the following code to create some space between the word and the underline, but its having the effect of making the whole menu dance around which is odd.

Is there a way of applying a consistent margin to the whole menu so that it doesn’t seem to dance around as you hover over items?

.ubermenu-current-menu-item .ubermenu-target-title {
border-bottom: 2px solid orange;
padding-top: 0 0 4px;
}

.ubermenu-target-title:hover {
border-bottom: 2px solid orange;
padding-top: 0 0 4px;
}

[jade]

Hi Will,

Please try:

.ubermenu .ubermenu-target-text {
    position: relative;
    display: block;
}

.ubermenu .ubermenu-target-text:after {
    content: '';
    height: 2px;
    width: 100%;
    background-color: orange;
    position: absolute;
    bottom: -5px;
    opacity: 0;
}

.ubermenu .ubermenu-target-text:hover:after {
    opacity: 1;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Hope this helps.

[wbc]

Thanks but this doesnt work. The jumping around still happens and the underlining is way off. Any other ideas?

[jade]

Hi Will,

You will have to remove this block code that you have added:

.ubermenu-target-title:hover {
    border-bottom: 2px solid orange;
    padding-top: 0 0 4px;
}

Then update this code:

.ubermenu .ubermenu-target-text:after {
    content: '';
    height: 2px;
    width: 100%;
    background-color: orange;
    position: absolute;
    bottom: -5px;
    opacity: 0;
}

to

.ubermenu .ubermenu-target-text:after {
    content: '';
    height: 2px;
    width: 100%;
    background-color: orange;
    position: absolute;
    bottom: -5px;
    opacity: 0;
    left: 0;
}

If you want to adjust the alignment of the orange line, just change the value of bottom: -5px; in the code above.

Hope this helps.

[wbc]

Fantastic. That works.

Thanks very much.

[Prasant]

You are most welcome.