How do I alter my Divi theme’s menu font size?

1 Views

I’m trying to make a top navigation menu on a WordPress site have a reduced font size. I’m using Elegant Themes’ Divi 2.3.1 theme with a child theme set up on it. I’m also using the Chrome Inspector tool to highlight the top-nav CSS element and add the desired font size declaration.

The problem is, when I do that, it has very little relative effect no matter what I set the font size to. Perhaps I’ve been staring at this too long, but I’ve gone up and down the tree in the inspector, placing “font-size:9px;” everywhere and cannot figure out where the font-size declaration will have the desired effect. Not even using !important helps.

Read More

Basically I just need to get the font size down to where it no longer wraps down a line whenever the browser window is sized at 981px wide and above. Any clues out there?

Post Views: 1

Related posts

1 comment

  1. Problem:

    You were trying to alter the font-size of > symbol, the value of which is 9px.

    #top-menu .menu-item-has-children > a:first-child::after {
  content: ">"
  font-size: 9px; /* This changes the size of the symbol */
}

    Solution:

    You need to alter the value of the font-size property in below rule.

    #top-menu li, .fullwidth-menu li {
  font-size: 25px; /* Change value */
}

Comments are closed.