Submenu Font Size

[mtaus+ 8]

I'm trying to increase the font size in a sub menu on this site: https://www.citroncatering.com

I added the following CSS: 

sf-menu ul li a {font-size: 16px !important;}

But it's not working. Any suggestions?

[edgarcheverier+ 23]

Hi,

you need to use this CSS:

.sf-menu ul li a {

font-size: 16px !important;

}

right now it's in 12px;

[mtaus+ 8]

@edgarcheverier I tried that but it's not working (screenshot). 

Also notice how much extra space is on the right side of the menu... how can I adjust the drop down menu width so that it's 100% of the menu text?

 

Edited March 31 by mtaus (see edit history)

[edgarcheverier+ 23]

Try adding more difference in the font-size and without the important option, for the text you can use text-align: center.

Here an example: https://cl.ly/3Q140m290d1F

[chrisayers+ 81]

You can have a good bit of "fun" in the CSS for .sf-menu. The text-size, alignment, and paddings may help you. You can also decorate it a good bit.  The dropdown width would vary a good bit due to your page name lengths.  Here is a few things that you can try in order to meet in the middle.

.sf-menu ul li a {
    display: block;
    position: relative;
    background-color: #ff6600;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    box-shadow: 0px 8px 10px 0px rgba(102,102,102,0.4);
    text-align: center;
    font-size: 18px;
    line-height: 13px;
    padding: 14px;
}

.sf-menu ul li {
    display: block;
    position: relative;
    background-color: #ff9933;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    box-shadow: 0px 8px 10px 0px rgba(102,102,102,0.4);
    text-align: center;
    font-size: 18px;
    line-height: 13px;
    padding: 14px;
}

 

Or round the corners some as well.

.sf-menu ul li a {
    display: block;
    position: relative;
    background-color: #ff6600;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-radius: 10px;
    box-shadow: 0px 8px 10px 0px rgba(102,102,102,0.4);
    text-align: center;
    font-size: 18px;
    line-height: 13px;
    padding: 14px;
}

 

I hope this gets you pointed the right way.

 

 

 

 

 

[mtaus+ 8]

On 4/1/2018 at 12:20 AM, edgarcheverier said:

Try adding more difference in the font-size and without the important option, for the text you can use text-align: center.

Here an example: https://cl.ly/3Q140m290d1F

@edgarcheverier I've updated the font to 22px but still not displaying. Also you can check the source code and you will see that the CSS is included in the page, even though it's not displaying.

[edgarcheverier+ 23]

ok,  can you try this one also:

.menu-item a {
font-size: 22px !important;
}

 

[mtaus+ 8]

@edgarcheverier that didn't work either

[edgarcheverier+ 23]

Let's try with the ID, did you test your CSS editor in order to see if it's working correctly?

#menu-item-1255 a {
font-size: 22px;
}

[mtaus+ 8]

@edgarcheverier I tried that CSS and it is also not working. Yes I believe see the CSS editor is working because the css is displaying in the inspector.