[yshankarParticipant]

I have looked at all the documentation and knowledge base. I need to change the font size of my sub menu and the css code that you have shown in other posts is not working for me. Need help. Thanks.

[Prasant RaiModerator]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

ul.sub-menu a {
    font-size: 18px;
}

Thanks.

[yshankarParticipant]

Still need help..Let me give you more details

I am using the integrity stack.

Looking at all the previous posts..I have tried the following to change the font size of my nav bar sub menu

.x-navbar .sub-menu {
font-size: 16px;
}

ul.sub-menu a {
font-size: 18px;
}

I also wanted to change the icon and tried this (this was suggested by you folks in a different post)

.x-navbar .x-nav li > a:after {
content: “\foob”;
}

Now another question…I want to change the color of the font in the sub menu and the background of the sub menu dropdown.

I appreciate your help.

Thanks.

note: I am new to wordpress..still learning…I have attached an image of my dropdown menu

[ThaiModerator]

Hi There,

Please add this:

ul.sub-menu {
background-color: #000;
}
ul.sub-menu a {
color: #000;
}

Hope it helps 🙂

[yshankarParticipant]

One more question..how do I change the size of the sub menu box..i.e. the length and the width…Thanks,

also tell me what i am doing wrong….it looks like i need the following code to change the font size of my sub menu. I am still not sure why I need both of them.

.x-navbar .sub-menu {
font-size: 16px;
}
.x-navbar .x-nav .sub-menu a {
font-size: 14px;
}

Thanks

[Rue NelModerator]

Hello There,

Thanks for updating in! If you want to change the width of the sub menu, please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

.desktop .sub-menu {
    min-width: 280px;
}

Hope this helps. Please let us know how it goes.

[yshankarParticipant]

I am sorry I am still having the color problem….to be clear here is my issue..

I have a main menu – ‘Thought Leadership” which has 2 sub menus – Case Studies & Posts

So when I am in Posts which is the active page…then under sub menu the color of the active page is in grey. I want to change that color.

Thanks,

[JadeModerator]

Hi there,

Would you mind providing your admin details so that we can check the codes that are in the customizer?

Thank you.

[yshankarParticipant]

Here is all the code from my custom css. If you can please tell me what is wrong..i.e. why is your code not helping me with my issue. Thanks.

****************

.x-card-outer .x-face-button {
display: none;
}
.x-card-inner {
min-height: 320px;
}
.x-face-outer.front .x-face-text {
font-size: 17px;
}

.x-face-outer.front .x-face-title {
color: black;
font-weight: 400
}
.x-face-outer.back .x-face-title {
color: black;
font-weight: 400
}

.x-navbar .sub-menu {
font-size: 16px;
}
.x-navbar .x-nav .sub-menu a {
font-size: 14px;
}
/* submenu background color */
.masthead-inline .x-navbar .sub-menu {
background-color: rgba(0, 160, 240, 0.85);
}
/* submenu text color */
.x-navbar .sub-menu a {
color:black;
}
.x-navbar .desktop .sub-menu a:hover {
color:black; /* submenu text color on hover */
background:white; /* submenu item background color on hover */
}
.x-navbar .sub-menu a {
text-transform: uppercase;
min-width: 200px;
}
.x-navbar .desktop .x-nav > li ul {
top: 90px;
}
@import url(‘https://fonts.googleapis.com/css?family=Quicksand’);
@media only screen and (min-width: 980px) and (max-width: 1230px) {
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
padding-left: 10px;
padding-right: 10px;
font-size: 12px;
}
.x-brand {
margin-top: 30px;
font-size: 28px;
}
}
ul.sub-menu {
background-color: #000;
}
ul.sub-menu a {
color: #000;
}

*****************************

Thanks for your help

[JadeModerator]

Hi there,

Would you mind providing us with the access to your admin section so that we could check the backend why the code is not working?

Thank you.

[Author]

Posts