How to remove the underline from the header menu in Dawn theme?

Solved

How to remove the underline from the header menu in Dawn theme?

AtlasVG
Tourist
16 0 2
Accepted Solution (1)
LizHoang
Shopify Partner
1251 159 195

This is an accepted solution.

Hi, I am glad the solution works. 

 

For the section divider, you can follow the guide here. 

 

1. Go to your Shopify > Theme > Edit code > Open Section : https://prnt.sc/mjONC4ISqxmQ

2. Click to Add a new Section > name it as "section-divider" > Done:   https://prnt.sc/hI5G9ToIrOD7

3. Select and remove the existing code on the file: https://prnt.sc/GnM-UUaDhf8k

4. Copy and Paste this liquid code below >  Save

 

 

<div class="{% if section.settings.full_width %} page-width {% endif %} sectionDivider" style="padding-top: {{ section.settings.padding_top | append: 'px' }}; padding-bottom: {{ section.settings.padding_bottom | append: 'px' }}">
<span style="background: {{ section.settings.color }}; height: {{ section.settings.height | append: 'px' }};">&nbsp</span>
</div>
<style>
.sectionDivider {
width: 100%
}

.sectionDivider span {
width: 100%;
display: block;
}
</style>

{% schema %}
{
"name": "Section divider",
"settings": [
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding bottom",
"default": 36
},
{
"type": "range",
"id": "height",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Height of the divider",
"default": 5
},
{
"type": "color",
"id": "color",
"default": "#000",
"label": "Divider color"
},
{
"type": "checkbox",
"id": "full_width",
"default": false,
"label": "Section full-width"
}
],
"presets": [
{
"name": "Section divider"
}
]
}
{% endschema %}

 

 

5. Go back to Theme > Customize > click to Add section > then you will see the Section divider here :https://prnt.sc/-9LSWnmGgyF1

 

6. Edit and design your divider > save : https://prnt.sc/EuhIWF0SvqD8

 

I hope it helps

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program

View solution in original post

Replies 3 (3)

LizHoang
Shopify Partner
1251 159 195

Hi @AtlasVG 

 

Thanks for your question.

 

To remove the underline on the Menu header, you can follow the instruction here: 

 

Step 1: Go to Online Store > Themes > Edit Code
Step 2: Go to Asset > Select Base.css  > Paste Code Below : https://prnt.sc/E0zBzs44kiLT

 

.header__active-menu-item { text-decoration: none; }
.header__menu-item:hover span { text-decoration: none; }

 

 

I hope it helps. 

 

Hana, Avada team

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program
AtlasVG
Tourist
16 0 2

It works! Thank you so so much! I do have one small request, how do I make a divider like this? I'm trying to make a divider with a custom liquid, wondering if you know how to create one like this, thanks!!! 

AtlasVG_0-1730248639890.png

 

LizHoang
Shopify Partner
1251 159 195

This is an accepted solution.

Hi, I am glad the solution works. 

 

For the section divider, you can follow the guide here. 

 

1. Go to your Shopify > Theme > Edit code > Open Section : https://prnt.sc/mjONC4ISqxmQ

2. Click to Add a new Section > name it as "section-divider" > Done:   https://prnt.sc/hI5G9ToIrOD7

3. Select and remove the existing code on the file: https://prnt.sc/GnM-UUaDhf8k

4. Copy and Paste this liquid code below >  Save

 

 

<div class="{% if section.settings.full_width %} page-width {% endif %} sectionDivider" style="padding-top: {{ section.settings.padding_top | append: 'px' }}; padding-bottom: {{ section.settings.padding_bottom | append: 'px' }}">
<span style="background: {{ section.settings.color }}; height: {{ section.settings.height | append: 'px' }};">&nbsp</span>
</div>
<style>
.sectionDivider {
width: 100%
}

.sectionDivider span {
width: 100%;
display: block;
}
</style>

{% schema %}
{
"name": "Section divider",
"settings": [
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding bottom",
"default": 36
},
{
"type": "range",
"id": "height",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Height of the divider",
"default": 5
},
{
"type": "color",
"id": "color",
"default": "#000",
"label": "Divider color"
},
{
"type": "checkbox",
"id": "full_width",
"default": false,
"label": "Section full-width"
}
],
"presets": [
{
"name": "Section divider"
}
]
}
{% endschema %}

 

 

5. Go back to Theme > Customize > click to Add section > then you will see the Section divider here :https://prnt.sc/-9LSWnmGgyF1

 

6. Edit and design your divider > save : https://prnt.sc/EuhIWF0SvqD8

 

I hope it helps

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program