How to bold menu font

  • I realize there’s been numerous posts explaining how to do this, but I am a bit of a beginner at this, so I’d really appreciate if someone could explain it to me.

    I’m trying to make the contents in the primary main navigation menu bold, but I am not having much success at it.

    From what I understand, I have to go to: Dashboard > Appearance > Editor, and then from all that code (in the style.css box), I have to go somewhere and physically add in something like font-weight:bold;.

    The problem however, is that I don’t seem to be able to find where I have to place this.

    I’d really appreciate it if anyone could help me out here.

    Thanks in advance!!!

Viewing 15 replies - 1 through 15 (of 17 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You’re not supposed to edit the theme’s files.

    Install this Custom CSS Manager plugin and use its section of the dashboard to hold your CSS modifications.

    That means creating new CSS styles, rather than modifying existing ones.

    Thread Starter inisbro

    (@inisbro)

    Oh, I had no idea about the plugin – thanks!

    I installed the plugin and entered this:

    .main_menu{
    font-size:25px;
    font-family:”Times New Roman” !important;
    }
    .main_menu li a{
    color:#ff0099 !important;
    font-weight:bold;
    }

    How do I actually apply this to my website now?

    Thanks a lot Andrew!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    How do I actually apply this to my website now?

    By putting that CSS into the plugin’s section of the dashboard, it will be put into to the <head> section automatically for each webpage.

    Thread Starter inisbro

    (@inisbro)

    Okay, but when I paste the CSS to make the menu font bold, nothing actually happens.

    I tried putting this:

    #menu li a {
    float: left;
    font-weight: bold;
    height: 25px;
    text-align: left;
    text-decoration: none;
}

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you demonstrate this, i.e link to that webpage?

    Thread Starter inisbro

    (@inisbro)

    Yep, the site is: vibhus.com

    I’m trying to bold the menu at the top (home, about me, portfolio etc.)

    Thanks a lot Andrew, I really appreciate you helping me out.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    There isn’t an element with an “id” of “menu”, so your styles cannot apply.

    Thread Starter inisbro

    (@inisbro)

    Oh, so it is not possible to bold the menu?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It is possible.

    Are you using a browser developer tool, like Firebug?

    Thread Starter inisbro

    (@inisbro)

    I’m just using the regular WordPress dashboard, though I could install Firebug if that’s what it takes to bold the menu :/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Do you have Google Chrome instead?

    Thread Starter inisbro

    (@inisbro)

    Yep.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Open your site in Google Chrome,
    Right click on one of the menu items and select ‘Inspect element’ [screenshot].

    You should then see the HTML you need to target (it’s a class, not an ID). Alternatively use the CSS on the right-hand column to help you understand which CSS selectors you could use.

    Thread Starter inisbro

    (@inisbro)

    Okay, so once I identify which part of the HTML I need to target, how would I go about adding in the HTML code to bold it?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    CSS applies styles to “Selectors”.
    Your CSS was right apart from it had the wrong selector.

    https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

    You need to use a period character instead of the hash tag.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘How to bold menu font’ is closed to new replies.