Docs

[jrhager84]

I have the Integrity menu installed, and anytime I try to add custom styling to the menu items, it only applies to a box *above* the text. When I’ve used Ethos and Renew before, I could just add a background, and it’d span the li child divs. I’m looked for skewed background chevron style if I can.

I’ll attach creds to my site in a private reply.

[jrhager84]

This reply has been marked as private.

[jrhager84]

Actually, I’d really like to user Ubermenu, but from what I’ve read, it causes issues with One-Page nav? Is that still an issue? If not, I’ll use that. Please advise. Thanks!

[Lely]

Hello There,

Yes, when Ubermenu is active it will override default X theme menu including the One Page nagivation menu. That is how it works by default. Regarding the custom styling, can you give us screenshot of what you want to achieve so we can be specific on our suggestion. Thank you.

[jrhager84]

I’m looking to achieve either a chevron-style shape, or at the very least just a colored bg behind the menu items, that spans the entire navbar height vertically.

My preference:

http://prntscr.com/caj9ua

If I can’t, then just a solid rectangle is fine.

[Rupok]

Hi there,

It would be tough with CSS. If you have any image for that, it would be easier. Let’s create the image, upload it and provide us the link. We will help you to tailor some code to do that.

Cheers!

[jrhager84]

The problem is then it won’t be responsive. I’m ok with just skewed rectangles then. I’ve seen that done before. The chevron was a best-case. I’m ok with parallelograms. Even straight rectangles if that’s too much, but I’m 99.99999% sure I saw them on another X site.

[Rad]

Hi there,

Image or texts will not be responsive since the white text needs to stay on that red background. Best approach uses multiple images controlled by visibility (section and row’s HIDE BASED ON SCREEN WIDTH option). That way, you can decide where to display a full width image and a vertical image.

Thanks!

[jrhager84]

I understand. It’s ok — Forget about the images. How do you make the *entire* background of Integrity a color? It’s just a little bar above the menu text. I just want each menu item to be fully-covered instead.

For reference — This is how it is now. I just want it to extend down the entire height of the div.

http://prntscr.com/cakme8

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

body .x-navbar .desktop .x-nav>li>a {
    height: auto;     
    margin-top: 27px;
    padding: 10px;
}

body .x-navbar .desktop .x-nav>li>a:hover, 
body .x-navbar .desktop .x-nav>.x-active>a, 
body .x-navbar .desktop .x-nav>.current-menu-item>a {
    box-shadow: none;
    background: hsl(302,99%,50%);
}

Hope that helps.

[jrhager84]

Are you able to skew those lines by chance?

[jrhager84]

Ok — I’ve gotten in close to what I want with a little editing of the code provided. Only two more things, really.

1. I’d like to extend the right div color so there’s no white on the right side.

2. I’d like to vertically center and maybe offset the a elements in the skew.

Thanks!

[Rue Nel]

Hello There,

Thanks for getting back to us. To have a skew lines, please update the code and use this:

body .x-navbar .desktop .x-nav>li>a {
    height: auto;     
    margin-top: 27px;
    padding: 10px 30px !important;
}

body .x-navbar .desktop .x-nav>li>a:hover, 
body .x-navbar .desktop .x-nav>.x-active>a, 
body .x-navbar .desktop .x-nav>.current-menu-item>a {
    box-shadow: none;
    background: hsl(302,99%,50%);
    text-decoration: none;
    border: none;
}

body .x-navbar .desktop .x-nav>li>a:hover:before, 
body .x-navbar .desktop .x-nav>.x-active>a:before, 
body .x-navbar .desktop .x-nav>.current-menu-item>a:before,
body .x-navbar .desktop .x-nav>li>a:hover:after, 
body .x-navbar .desktop .x-nav>.x-active>a:after, 
body .x-navbar .desktop .x-nav>.current-menu-item>a:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 22px 0 23px 15px;
  border-color: transparent transparent transparent #f3f3f3;
  background: hsl(302,99%,50%);
}

body .x-navbar .desktop .x-nav>li>a:hover:after, 
body .x-navbar .desktop .x-nav>.x-active>a:after, 
body .x-navbar .desktop .x-nav>.current-menu-item>a:after {
    left: auto;
    right: 0;
    border-color: transparent transparent transparent hsl(302,99%,50%);
    background-color: #f3f3f3;
}

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for your understanding.

[jrhager84]

Ah. We had moved on from the chevron idea, but I’m glad to know that it’s possible, though.

Is the new header update going to tackle some of these issues? I know quite a few people that have a mess of a time with a simple skewed box, because of the (seemingly) arbitrary hierarchy of some of these items and implementations. How are you guys finding the structure? Am I not reading inspector as well as you guys? Is there some tool I can use to analyze the page?

If you guys had menu item styles/shapes, and section separators (maybe with masks?) man — You guys would be A-1 all over.

[Paul R]

Hi,

We are using browser developer tools.

This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive. Thanks!

[Author]

Posts