How to change Menu text size

  • Resolved beckseden

    (@beckseden)


    3 years, 9 months ago

    Hi all

    I am trying to get my head around CSS by creating a simple website. I am using Astra, and trying to customise using CSS.

    I have been unable to figure out how to change the size of the Menu Text.

    I have tried this:

    #menu-menu-principal a {
    font-size: 1.5em !important;
    font-weight: bold;
    }

    And also this:

    .navbar-nav > li > a {
    font-size: 1.5rem !important;
    }

    I’m obviously doing something wrong as nothing is changing. I’d be grateful for any help.

    Thanks

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Team Brainstorm Force

    (@brainstormteam)

    3 years, 9 months ago

    Hi @beckseden,

    The menu font size is inherited from the Base Typography on the Global section of the Customizer. However, if you want to give your site menu different size, please try adding the following CSS code in Appearance > Customize > Additional CSS

    .main-header-menu > .menu-item > a {
    font-size: 1.5em;
    font-weight: bold;
}

    Please modify the code above as per your needs.

    I hope that will help.

    Kind regards,
    Herman 🙂

    Thread Starter beckseden

    (@beckseden)

    3 years, 9 months ago

    Hi Herman @brainstormteam. Thank you – I think that fixed that problem, But I see now I have bigger problems (not caused by your fix). I have made a separate topic abut that.

    Team Brainstorm Force

    (@brainstormteam)

    3 years, 9 months ago

    Perfect, @beckseden!

    Good to know the code is working for you.

    Would you mind to mark the topic as resolved and we’ll get in touch in the other topic.

    Have a nice day and stay safe!

    Kind regards,
    Herman 🙂

    Thread Starter beckseden

    (@beckseden)

    3 years, 4 months ago

    Thread Starter beckseden

    (@beckseden)

    3 years, 3 months ago

    Hi @brainstormteam

    The code no longer seems to be working. I just tried to increase the size a little more, and nothing is changing. I’ve cleared the cache etc.

    I changed the code in customise>custom css to:

    .main-header-menu > .menu-item > a {
    font-size: 2em;
    font-weight: bold;
    }

    But nothing happened. Any suggestions would be gratefully received.

    Many thanks

    Becky

    Team Brainstorm Force

    (@brainstormteam)

    3 years, 3 months ago

    Hi @beckseden,

    I noticed that your site, adornamental.co.uk, is no longer using Astra theme. I would suggest you get in touch with the theme author to get help with this.

    Kind regards,
    Herman 🙂

    Thread Starter beckseden

    (@beckseden)

    3 years, 3 months ago

    Hi.

    The website I need help with is http://www.chezchien.co.uk which does use Astra theme. Apologies or the confusion – I used the same code on the chez chien website.

    Thanks

    Becky

    Team Brainstorm Force

    (@brainstormteam)

    3 years, 2 months ago

    Hi @beckseden,

    Sorry for the delay.

    I noticed that you are using a custom header created using Elementor on your site and have marked the topic as resolved.

    However, for the other users who have the same query, if you are using the new Astra Header Footer Builder, you can change the menu font size from the Primary Menu section on the Customizer under the DESIGN tab.

    The option to change the menu font size is not available on the Astra free theme if you are using the old header/footer.

    I hope it helps.

    Kind regards,
    Herman 🙂

    P.S. We recommend reaching out to us through our Support Portal for faster and quicker help and resolution as mentioned here.

    Thread Starter beckseden

    (@beckseden)

    3 years, 2 months ago

    Hi @brainstormteam

    How strange – it’s not resolved yet. But it is now, thank you.

    I didn’t reach out to tech support because I am using the free version. Does that not matter?

    Team Brainstorm Force

    (@brainstormteam)

    3 years, 2 months ago

    You’re most welcome @beckseden!

    It’s no problem even if you are using the Astra free theme to contact us thru our Support Portal. In fact, we always recommend our users to reach out to us thru it. The free users will have a lower priority than the pro users, but we will still reply faster than the ones who reach out to us thru this forum.

    Kind regards,
    Herman 🙂

    sterlingfrancis

    (@sterlingfrancis)

    3 years ago

    In order to change the font size in the Main menu, please add this code to Customize -> Additional CSS

    .navbar-nav > li > a {
    font-size: 13px;
    }
    Adjust 13px as you like it.

    Please let us know if this works for you.

    Best regards.

    Source: Aesthetic Fonts

    • This reply was modified 3 years ago by sterlingfrancis. Reason: edit my comment
Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘How to change Menu text size’ is closed to new replies.