Menu fonts – Child theme

Hi
Here is a new concern.

I want to change the appearance of the menu : I don’t like uppercase and I want a smaller text.
After spending a lot of time checking eveywhere and making unsuccesfull trials in “typography”, I have checked on the web and see that it was necessary to change the code and that it has to be done in a child theme. I went in your documentation that leads me to a Worpress page.
I don’t understand what I should do : there is a zip “Baseld child” present in the files of Basel, but it does not show when I go to the “themes” pages so I can’t call it…
Lost I am…

Hello,

Thank you for the question.

1. Install your child theme by uploading basel-child.zip in Appearance -> Themes as you did it with parent theme and activate it. It will give you the ability to make your code change inside the child theme and not loose it after parent theme update.

2. As for typography please provide a screenshot of which text do you want to change font and we will give you a custom CSS code.

Regards

OK I will try this. For the code of the text, I must be sure of what I want and I am not yet. I am going to make trials ; I think I can do that by myself. Maybe you can just tell me what line of the code is about the menu police ?

Okay, so if you are going for example to change menu text to lowercase so the code will be like this

.main-nav .menu > li > a {
    text-transform: initial;
}

OK perfect. Thank you very much

You are welcome 🙂

Hello Xtemos

I have tried to change the code for the menu but I don’t know WHERE I have to place the code you have given to me.
All this seems to be about the main menu :

.header-simple .main-nav .menu > li.menu-item-design-full-width > .sub-menu-dropdown,
.header-categories .main-nav .menu > li.menu-item-design-full-width > .sub-menu-dropdown {
  top: 120%;
}
.header-simple .main-nav .menu > li.menu-item-design-full-width.item-event-hover:hover > .sub-menu-dropdown, .header-simple .main-nav .menu > li.menu-item-design-full-width.item-event-click.item-menu-opened > .sub-menu-dropdown,
.header-categories .main-nav .menu > li.menu-item-design-full-width.item-event-hover:hover > .sub-menu-dropdown,
.header-categories .main-nav .menu > li.menu-item-design-full-width.item-event-click.item-menu-opened > .sub-menu-dropdown {
  top: 100%;
}
.header-simple .main-nav .menu > li > .sub-menu-dropdown,
.header-categories .main-nav .menu > li > .sub-menu-dropdown {
  top: 100%;
}
.header-simple .main-nav .menu > li.item-event-hover:hover > .sub-menu-dropdown, .header-simple .main-nav .menu > li.item-event-click.item-menu-opened > .sub-menu-dropdown,
.header-categories .main-nav .menu > li.item-event-hover:hover > .sub-menu-dropdown,
.header-categories .main-nav .menu > li.item-event-click.item-menu-opened > .sub-menu-dropdown {
  top: 80%;
}

.header-simple .main-nav .menu > li > a {
  height: 115px;
  line-height: 115px;
}

.header-categories .main-nav .menu > li > a {
  height: 115px;
  line-height: 115px;
}

Do I have to change each occurrence of “main-menu” ?

Actually you don’t need to change our styles.css. Simply add this code to the Custom CSS section in Theme Settings

.main-nav .menu > li > a {
    text-transform: initial;
}

Yesss ! It works.
I have added this code only in the first panel “Global Custom CSS”.
Is it necessary to add it in the other panels ?

No, only to global section 🙂

Perfect.

One more question :
What field of “typography” allows to fix the size of the menu font ? I have made several trials but no changes…

Try to change it with “Navigation font” option.

OK Thank you !

Hi
After making changes in “Typography”, the cms does not work anymore. I have removed it and added it again, it does not work…

What do you mean by “cms does not work anymore”? Please explain you problem in more details.

.main-nav .menu > li > a {
    text-transform: initial;
}

This custom css you gave me for lowercase has been working with my previous configuration. But with the new one, my main menu (you can see it it the top header) stays in uppercase. I don’t understand why it does not want to change…

It is because you have copied the code without necessary symbols. We have corrected it on your web-site. Please check.

Thank you sooo much for your help.
Have a nice day.

You are welcome!

[Author]

Posts