How can I customize the Navigation menu in Dawn?

Store Design
, , , , , , ,
1

Hi,

I would like to edit the display of my main menu at the top of the page

  • I would like the text bigger

  • I would like the selected page to be written in a background badge instead of being underline

Thanx for your help

Alex

2

Hello @Alex087

Its Artzen Technologies! We will be happy to help you today.

Copy the below css and paste it at the end of the base.css file in your theme.

.header__inline-menu span.header__active-menu-item {
    text-decoration: none;
    background: lightgrey;
}

.header__inline-menu span{
    padding: 5px;
    font-size: 18px;
}

Let me know if need further assistance
Regards,
Artzen Technologies

3

Thanks Artzen, it’s working but needs some adjustments.

  • I want the text to be bold & white when the page is selected

  • I want the badge to be larger (same height) when the page is selected

  • when overing the name of the page that is not selected, is it possible to change the text color instead of underlining ?

Thanx for your help

4
  1. For text to be bold & white and badge to be larger (same height) when the page is selected replace the below css with above mentioned css.
.header__inline-menu  span.header__active-menu-item {
    text-decoration: none;
    background: lightgrey;
    color: white;
    font-weight: bold;
}

.header__inline-menu  span{
    padding: 10px;
    font-size: 18px;
}
  1. when hovering the name of the page that is not selected.

Yes, it is possible to change the text color instead of underlining.Please tell me which color you want on the text when hovering.

If helpful, please Like and Accept this Solution to help others

5

Thanks Artzen,

sorry, I didn’t understand what need to be replace by what in the CSS. Also, is it possible to add a radius to the badge of the selected page?

instead of underlining when hovering, I would like this color #7D58A0

Thanx

6

@Alex087 Just copy the below css and paste it at the end of the base.css file in your theme and you will get the result what you want.

.header__inline-menu .header__menu-item:hover span {
    text-decoration: none!important;
    color: #7D58A0;
}

.header__inline-menu  span.header__active-menu-item {
    text-decoration: none;
    background: lightgrey;
    color: white;
    font-weight: bold;
    border-radius: 7px;
}

.header__inline-menu  span{
    padding: 10px;
    font-size: 18px;
}
1 Like
7

Wahoo that’s great! thanx Artzen,

is it possible to have the ‘Shop’ button selected when i’m on a product page?

Also, I would like to increase the size of the text of the subtitle on my homepage

Thanks