How do i increase size of submenu fonts and change their colours?

Support
#1

Hi there

I am having difficulties at the moment and really need your assistance…

I have been trying to increase the submenu font size without success with code supplied and in the process i may have made a mistake whether the wrong code is installed that may be conflicting the code given?? I have it copied for you to see.

What i am trying to do is:

Increase submenu font size and to change the colour too for different pages as i cannot see it as i have different colour pages. (Would i change css on each page for colour changes) opposed to global??
I have H1 headings which are perfect on desktop but on smaller devices they look too large so i need to reduce h1 on mobile devices.
I would really appreciate your time on this as this needs to go live asap !!
If necessary i will pay for this to be fixed…

**Please see uploaded files showing the code in Global CSS…you will know if there is a problem as you know what you are doing more than i do :slight_smile:

Much appreciation as always…i eagerly await your response!!

Yours Kindly
Huseyin

Thank you for your time and energy with this.

Much appreciation

Huseyin

#2

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-navbar .mobile .x-nav .sub-menu a {
    font-size: 16px;
}
.page-id-14 .x-navbar .mobile .x-nav .sub-menu a,
.page-id-16 .x-navbar .mobile .x-nav .sub-menu a,
.page-id-17 .x-navbar .mobile .x-nav .sub-menu a  {
    color: #f00;
    border-color: #fff;
}
@media (max-width: 480px){
    .x-text h1 {
        font-size: 40px;
    }
    .x-container.max.width.offset {
        width: 100%;
    }
}

Please note that the 14, 15, 16 numbers are the page ID.

Regards!

#3

Hi Thai

Thank you for getting back to me!

Unfortunately that has not achieved the result i was after. What it did do was increase some of the menu font size and colour but the main parent menu fonts remained the same in size and colour?

What i am trying to achieve is; on the black background pages i need to change the colour of the fonts on the menu/sub-menu as the colour i have chosen is black (currently white) for the light brown pages but doing that is affecting all pages…can i change the css on each page regarding the menu/sub-menu so i can independently change size and colour of fonts within? Does that make sense??

I have screen shot so you can see what i mean.

On the black backgrounds the whole menu/sub-menu needs to be as you see it below in grey and white and needs larger fonts in size(26px) too all the same.

The pages below need to be the same also…black and brown menu/sub-menu including same size fonts need to be (26px) throughout.

As you can see above you cannot see the menu…too small wrong colour.

I hope i have put my point across and really appreciate your support…this site is just waiting for these minor tweaks and then it must get out there.!!

God bless…

I eagerly await your response!!

Huseyin

#4

Hello There,

Please use this code instead:

.x-navbar .mobile .x-nav li>a {
    font-size: 26px;
}

.x-navbar .mobile .x-nav .sub-menu a {
    font-size: 20px;
}

.x-navbar .mobile .x-nav li.current-menu-item > a,
.x-navbar .mobile .x-nav li:hover > a,
.x-navbar .mobile .x-nav li.x-active > a {
    color: red;
}

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

#5

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