Solved

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

zikriarathore
Excursionist
78 1 7

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/

Accepted Solutions (2)

techlyser_web
Shopify Partner
1122 214 234

This is an accepted solution.

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 </body> on theme.liquid

<style>
   ul.list-menu--disclosure {
      background: #fff !important;
  }
   .header__submenu .header__menu-item {

         color: #000 !important;
   }
</style>

techlyser_web_0-1706608183469.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

techlyser_web
Shopify Partner
1122 214 234

This is an accepted solution.

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 </body> on theme.liquid

<style>
    .header__submenu .header__menu-item:hover {
        color: red !important;
    }
</style>

techlyser_web_0-1706690571809.png

 

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 12 (12)

techlyser_web
Shopify Partner
1122 214 234

This is an accepted solution.

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 </body> on theme.liquid

<style>
   ul.list-menu--disclosure {
      background: #fff !important;
  }
   .header__submenu .header__menu-item {

         color: #000 !important;
   }
</style>

techlyser_web_0-1706608183469.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
zikriarathore
Excursionist
78 1 7

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

techlyser_web
Shopify Partner
1122 214 234

This is an accepted solution.

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 </body> on theme.liquid

<style>
    .header__submenu .header__menu-item:hover {
        color: red !important;
    }
</style>

techlyser_web_0-1706690571809.png

 

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
zikriarathore
Excursionist
78 1 7

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

techlyser_web
Shopify Partner
1122 214 234

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 </body> on theme.liquid

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

techlyser_web_0-1706695822412.png

 

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
techlyser_web
Shopify Partner
1122 214 234

Mark it as an Accepted Above Solution.

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
zikriarathore
Excursionist
78 1 7

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

zikriarathore
Excursionist
78 1 7

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

zikriarathore
Excursionist
78 1 7

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.

techlyser_web
Shopify Partner
1122 214 234

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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
zikriarathore
Excursionist
78 1 7

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 ?

techlyser_web
Shopify Partner
1122 214 234

you have to find code in footer.liquid file.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com