Jump to content
mtaus

Submenu Font Size

Recommended Posts

mtaus

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?

Share this post


Link to post
Share on other sites
edgarcheverier

Hi,

you need to use this CSS:

.sf-menu ul li a {

font-size: 16px !important;

}

right now it's in 12px;

  • Like 1

Share this post


Link to post
Share on other sites
mtaus

@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?

css.png

 

Edited by mtaus (see edit history)

Share this post


Link to post
Share on other sites
edgarcheverier

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

Share this post


Link to post
Share on other sites
chrisayers

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;
}

image.thumb.png.4022450b51a507b7fb036df21c188cc7.png

.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;
}

image.thumb.png.ba8577d9b3a22139ca880e38880562b6.png

 

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;
}

image.thumb.png.453a7178f6da4754b3f19f2783b1709a.png

 

I hope this gets you pointed the right way.

 

 

 



 

 

  • Like 1

Share this post


Link to post
Share on other sites
mtaus
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.

Share this post


Link to post
Share on other sites
edgarcheverier

ok,  can you try this one also:

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

 

Share this post


Link to post
Share on other sites
edgarcheverier

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;
}

Share this post


Link to post
Share on other sites
mtaus

@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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×