Archived topic

Mobile Menu Icon and Link Colour

5 replies · Started by Lee on February 9, 2022

Viewing posts 1–6 of 6

February 9, 2022 at 4:14 am #2110504

Hey guys,

I have a few questions please:

1. How can I change the thickness of the mobile menu icon font that appears in the top right-hand corner on mobile phones?

2. How can I customise the desktop and mobile drop-down menus to appear in a different shade?

3. For certain links (not all), I'd like to change the colour of the text permanently so the text/link stands out more on the page. Just changing the font colour in the editor doesn't seem to work.

Many thanks in advance,

Lee.

February 9, 2022 at 4:42 am #2110537

Hi there,

1. You would need to replace the menu-bars SVG icon with your own - see here:

https://docs.generatepress.com/article/generate_svg_icon_element/

2. You can change the submenu colors in Customizer > Colors > Primary Navigation.
Or do you require one set of colors for desktop and another set for Mobile?

3. If this link inside a normal text block? Or is it part of a CTA.

February 9, 2022 at 8:06 am #2110955

1. Thank you.

2. The sub-menu customisation would be for mobile. To help it stand out from the primary menu a little more.

3. The link would be a few words written as a paragraph inside a grid.

Many thanks again.

February 9, 2022 at 9:35 am #2111053

2. This CSS:

#generate-slideout-menu.main-navigation .main-nav ul ul {
    background-color: #f00;
}

3. If its the entire block of text then i would use the GB Headline block:

https://docs.generateblocks.com/article/headline-overview/

It can be set to a P tag and you can change its link colors.

February 10, 2022 at 8:37 am #2112850

Thanks David,

2. And what if I also wanted to alter the text colour in the mobile drop-down menu too?

3. It wouldn't be the entire block. It would just be a few words within a "paragraph" consisting of around maybe 300 words. Like when you link articles together. I've inserted a link to an article that demonstrates this.

Many thanks again...

February 10, 2022 at 7:55 pm #2113640

Hi Lee,

2. Can you try adding this CSS?:

#generate-slideout-menu.main-navigation .main-nav ul ul a{
    color: #000;
}

Kindly modify the color value to your preference.

3. If you wish to change the color of the links in a Headline block, it is possible through the Colors section of the block settings.

See this as reference: https://share.getcloudapp.com/KouY8P6j

However, if you wish to modify the color of a specific text that isn’t a link in the Headline block, you would need to go to the Code editor. Then you would need to insert the specific text in a span element and assign a certain class.

See this as reference: https://share.getcloudapp.com/YEuBbxx9

As shown, I inserted a text in a span element with a class “change-font-color”.

After doing so, you may target this text through custom CSS:

.change-font-color {
    color:yellow !important;
}

Here it is working from my end: https://share.getcloudapp.com/jkum059D

Hope this helps! :)

This archived topic is closed to new replies.

Start building better websites today.