CODEWITHSUNDEEP
htmlcssgoogle-chromegoogle-chrome-devtools
alancc
alancc

Reputation: 799

Cannot change the font of the menu to bolder in Chrome DevTools

My website is at https://www.datanumen.com/

I want to change the font of the menu items to bolder, so I do as follows:

  1. Open it in Chrome
  2. Click "DevTools"
  3. Go to the first menu item "Products" and right click "Inspect".
  4. Then I find the menu item
 <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"><a href="https://www.datanumen.com/products/">Products</a></li>
  1. Then in the right hand, I click "+" to add a style for it, as follows:
li.menu-item.menu-item-type-post_type.menu-item-object-page {
    font-weight: bolder;
}

I hope to make all the menu items bolder, so I choose the specifier as specific as to the menu-item-object-page instead of menu-item-161.

Then after doing that, nothing happens. The menu items does not become bolder at all.

Below is what I do: enter image description here

Just wonder what I do wrong? Thank you very much.

Update

Have just use the following css rule to bold the menu items:

#menu-main-menu-1 li a {
    font-weight: bold;
}

But one more question is that it seems bold and bolder are completed same, see below: enter image description here

Upvotes: 0

Views: 806

Answers (5)

citizen1
citizen1

Reputation: 61

@alanac The font-familiy you are using must have support for that css property. I try with font-weight: 1000; and that's all bolder appearance that can be set for this font.

testing wwww.datanumen.com in chrome browser with developer tools

Upvotes: 1

citizen1
citizen1

Reputation: 61

Agree with answers, you are need target the 'a' element.

Check if it's not an inheritance applied from another css declaration.

testing wwww.datanumen.com in chrome browser with developer tools

testing wwww.datanumen.com in chrome browser with developer tools

Upvotes: 0

nripen chakrawarty
nripen chakrawarty

Reputation: 44

Use the following code

.desktop-nav>ul>li>a {
    font-weight: 900 !important;
}
or
.desktop-nav>ul>li>a {
    font-weight: bolder !important;
}

The font weight should go to the anchor tag.

Upvotes: 0

PHP Geek
PHP Geek

Reputation: 4033

In your css you missed "a"

li.menu-item.menu-item-type-post_type.menu-item-object-page a {
    font-weight: bolder;
}

Always choose id over classes as id's are unique so no confusion, as you have id in your ul tag

give the following css

#menu-main-menu-1 li a {
    font-weight: bolder;
}

Upvotes: 1

Shahid
Shahid

Reputation: 145

font-weight applied to the child a element is taking precedence here. You should target the a element inside li, instead of li.

li.menu-item.menu-item-type-post_type.menu-item-object-page a {
    font-weight: bolder;
}

Upvotes: 0

Related Questions