Support » Theme: Mesmerize » Change Case Nav Bar

  • chloebaggins

    (@chloebaggins)


    Hello,
    I have adjusted the case of my site name (my site is not yet active) to be Title Case, but what is the code to adjust the case of the Nav Bar items? My problem is that currently the Nav Bar on the front page is all upper case, but the inner pages and dropdown menus are Title Case. I’m fine with whatever change is easier, either all menu items in CAPS or all in Title Case, but it’s inconsistent now so looks odd.

    In the Mesmerize Theme Knowledgebase, https://extendthemes.com/knowledge-base/mesmerize-theme/knowledgebase/front-page-navigation/, it shows the Nav Bar cases can be changed, but I’m not seeing the image displayed in my site (from that page, see “Navigation Typography (click to open the customization panel; from here, you customize the typography of the menu items):”. I’ve added images of what I see on the page and in my menu options to this folder: https://www.dropbox.com/sh/riduqm91u06r0dc/AAB22QkQmfUGHMbCZlmO6oi8a?dl=0

    Thank you.

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

Viewing 1 replies (of 1 total)
  • ecohostingservices

    (@ecohostingservices)

    Hi
    You need to change it in the stylesheet (CSS) or add it to the CSS section of the customiser.

    If you are using Chrome, right click the menu and click ‘Inspect’ and look at the stylesheet there for the menu css. You are looking for ‘text-transform’ and you can change it there.

    For top level menu:

    @media (min-width: 768px)
    ul.dropdown-menu > li > a {
        font-weight: 600;
        font-style: normal;
        font-size: 14px;
        line-height: 160%;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    ‘Capitalize’ is Title case and obviously UPPERCASE gives you all capitals. So the top level is in Uppercase so just look for that and change it there.

    For 2nd level i.e dropdown you need to find this:

    ul.dropdown-menu li a {
        display: block;
        text-decoration: none;
        white-space: nowrap;
        color: inherit;
        position: relative;
        color: #000;
    }

    After ‘color’ add in text-transform: UPPERCASE;

    That’s if you need the 2nd level all uppercase as well.

    Add these two to the CSS section of the Customiser and publish. Or if you are using a Child theme simply put the code into the child theme’s stylesheet and save it.

    Colin

Viewing 1 replies (of 1 total)
  • The topic ‘Change Case Nav Bar’ is closed to new replies.