Menu Sub items hard to read

Support
#1

How do I change the menu sub items look.

#2

Hi,

Thanks for writing in!

To style it, you can add the code below in Theme Options > CSS

/* submenu background and font size */
.desktop .sub-menu {
   font-size: 12px;
   background-color: #fff;
}
/* submenu normal state color */
.x-navbar .desktop .x-nav > li > a, 
.x-navbar .desktop .sub-menu li > a, 
.x-navbar .mobile .x-nav li a {
    color:#000;
}
/* submenu hover text color */
.x-navbar .desktop .sub-menu li > a:hover,
.x-navbar .desktop .sub-menu .x-active > a, 
.x-navbar .desktop .sub-menu .current-menu-item > a {
    background-color:#ccc;
    color:#000;
}

Please change the size and colors as you like.

Hope that helps

Menu text size
#3

Thanks didn’t work. its actually made it harder to read as the text was black. The sub menu was the exact same too.

Any other ideas?

#4

Looking for something more like this but will fits with the app Demo theme

#5

Hi,

Please note that this falls under custom development which is outside the scope of support.
The code provided serves only as a guide and to give you something to start with.

As I have mentioned, you need to change the colors and size to your liking.
You can check/generate your color’s hex code on the link below.

http://hnl.name/color-schemer-online/

I am sending you some video resource that could help


Thanks

#6

Hi, I would argue that it is not custom. In the attached screen shot, the behaviour of sub menus using one of the default themes works. X theme has stripped out the basic sub menu functionality/appearance. Can you please advise how to get that look back?

#7

Hi David,

I tried to check the site that is in the licenses page of your account but the site is under a coming soon page.

Is there a chance that you can give us access so we can check?

Thank you.

#8

Please check the secure note for login details.

#9

Hi David,

Actually, the code that @paul.r works well it’s just that you will need to adjust the styling on the code to make it fit your site’s aesthetic.

Please try this:

/* submenu background and font size */
.masthead-inline .x-navbar .desktop .sub-menu {
   font-size: 12px;
   background-color: rgb(51, 187, 255) !important;
   padding: 0;
}

/* submenu normal state color */
.x-navbar .desktop .sub-menu li > a {
    padding: 10px 20px;
}

/* submenu background and font size */
/* submenu hover text color */
.x-navbar .desktop .sub-menu li > a:hover,
.x-navbar .desktop .sub-menu .x-active > a, 
.x-navbar .desktop .sub-menu .current-menu-item > a {
    color: #fff;
}

Feel free to tinker the code provided above.

Hope this helps.

1 Like
#10

I am having the same issue with menu functionality and appearance.

in my main menu I require:

Plans (this is a non clickable item; drops down to what will be 2 clickable pages, used url as # method is this correct way? https://www.youtube.com/watch?v=1B4kKrvajNc )

Submenus to look same as top item, but they aren’t showing up, appears underneath obscured)

i pasted some of the css above and did not work

ideas?

[edit → added screenshot]

Thanks,

Steve.

#11

Hello Steve,

This is a post started by a different user. Posting on someone else thread create lot of confusion and slows down the response time. For faster response we encourage users to create a new ticket. In that regards I request you to please create a new ticket and someone from support team will take a look. For more details please take a look at our support handbook.

Thanks for understanding.

#12

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