Want submenu's text color black and background should be white and onhover text color should be red

Store Design
, , ,
1

hye

if you see this website fujisports.com its megamenu’s submenu’s background color is white ,onhover color changes to red and text color is black .how can i have this in my website .this is my website https://37e364.myshopify.com/

2

Hello @zikriarathore

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

ul.list-menu--disclosure { background: #fff !important; } .header__submenu .header__menu-item { color: #000 !important; }

techlyser_web_0-1706608183469.png
techlyser_web_0-1706608183469.png845×346 169 KB

3

hye

successfully changed background to white color of submenu but there is no onhover effect to red color on submenu

and i want onhover color change effect to white color on megamenu items

4

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.header__submenu .header__menu-item:hover { color: red !important; }

techlyser_web_0-1706690571809.png
techlyser_web_0-1706690571809.png818×214 60.4 KB

  • Was my reply helpful? Click Like to let me know!
  • Was your question answered? Mark it as an Accepted Solution.
5

thanks it worked , and if you check my footer there headings i.e usefull links and shop , email ,address they all should have red underline and color white

6

You have to add custom code for each category and give custom class and add class to the code given below.
For Example:

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

h2.inline-richtext::after { content: ""; display: block; width: 100%; height: 3px; margin: 7px 0; background-color: red; max-width: 50%; }

techlyser_web_0-1706695822412.png

7

Mark it as an Accepted Above Solution.

Was my reply helpful? Click Like to let me know!
Thanks

8

why this red line is so big ?as you can see the website fuiji sports that has small red underline

9

this code didnt worked for me i just need red line in footer section under navigation links. when i inserted this code .red lines were shown under feautured products and every where and lines were big

10

i just need small red underlines under email,about karma sports, contact ,about us and if i add further text by using text block ,its heading should have red underline not so big ,it should be same like fujisports footer.

11

I understand what you want I have gave you a example and explained every thing. You have to add custom class on the footer menu then you have to apply CSS on the class, that I have already mentioned above.

12

will be very thankfull if you further tell me how to add custom class on the footer menu and apply css on the class? where is the code in shopify ?

13

you have to find code in footer.liquid file.