Uber Menu Syle Question

I would like to have a top level menu item on my site that is a square/rectangle box with text centered inside it. Similar to the “Admission” and “Donate” items on this site https://guidedogs.org. Is this possible with an Uber Menu in a Pro Header container?

Hello @cbordages,

Thanks for writing in! You do not need uberMenu to accomplish it. With Pro theme’s custom header builder, you can adjust the navigation inline element and make the parent menu items the same as your example site.

Hope this helps.

I’ve tried with the inline navigation element and haven’t been able to figure out the correct settings. Could you give me an example of how to make the square/rectangle parent elements?

Hey @cbordages,

Provided you didn’t setup a top and bottom padding to your bar and container, you should get the layout like in your sample site out of the box.

The only problem is, there’s no individual menu item background color option so you’ll need a bit of CSS for this. Please watch the video below.

Below is the CSS used. Change the code parts accordingly.

.menu-item-5 > .x-anchor {
  background-color: skyblue !important;
}

.menu-item-5 > .x-anchor.x-interactive,
.menu-item-5 > .x-anchor.x-active {
  background-color: rgb(208, 208, 208) !important;
}

For more Navigation Inline usage instructions, please see https://theme.co/apex/forum/t/elements-navigation-inline/14639

It’s also important that you understand Flexbox. Please see https://theme.co/apex/forum/t/using-flexbox/24851

You can learn CSS from sites like https://www.w3schools.com/

Hope that helps.

Thanks. That css works perfectly.

One more question: In addition to the background color, I would like to change the text color. I can’t quite seem to figure out the css selector for the actual text. What are the css selectosr for the text when inactive, hover, and selected.

To be clear, I want to change the color of the text from the normal menu bar color and I want the text color to change whenever anywhere in the box is hovered over, not just hovering over the text itself.

Hello @cbordages,

To change the text color, you can make use of this code:

.menu-item-5 > .menu-item > .x-anchor .x-anchor-text-primary {
  color: black !important;
}

.menu-item-5 > .menu-item > .x-anchor.x-interactive .x-anchor-text-primary,
.menu-item-5 > .menu-item > .x-anchor.x-active .x-anchor-text-primary {
  color: grey !important;
}

.menu-item-5 > .menu-item:hover > .x-anchor .x-anchor-text-primary {
  color: white !important;
}

We would loved to know if this has work for you. Thank you.

I had to change the suggested css somewhat to get it to work.

/* For inactive items */
.menu-item-15106 > .x-anchor .x-anchor-text-primary {
  color: #fff !important;
}

/* For active items */
.menu-item-15106 > .x-anchor.x-interactive .x-anchor-text-primary,
.menu-item-15106 > .x-anchor.x-active .x-anchor-text-primary {
  color: #019e59 !important;
}

I have not been able to get the hover selector correct.

Hi,

For hover, you can try the code below.

.menu-item-15106.hover > .x-anchor .x-anchor-text-primary {
     color: #019e59 !important;
}

Hope this helps

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.