Changing Menu Bar Font Size

0
votes

I'm using wordpress for a website.

Here is the link for the website: http://Jamezpearce.byethost7.com

How can I can make the font smaller so can fit more menu bars onto the website?

I really appreciate any help given to me if anyone wants anything else please comment and I will supply it.

I have already tried altering the CSS but don't seem to get anywhere I'm probably doing it incorrect.

I have added 

font-size:0.75em;

to all the menu CSS I can see and still no joy.


/* Pagenavi  */

#pnavigation {
    margin: 20px 0px;
}

.wp-pagenavi {
    font-size:0.75em;
    text-align: centre !important;
    margin-left: auto;
    margin-right: auto;
}

.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited {
    text-decoration: none;
    background: #42444e!important;
    border: 1px solid #212227!important;
    color: #fff !important;
    padding: 4px 8px !important;
    display: block;
    text-align: centre;
    float: centre;
    display: inline;
    margin-right: 6px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    font-size:0.75em;
}

.wp-pagenavi a:hover {
    color: #ffffff;
}

.wp-pagenavi span.pages {
    display: none;
}

.wp-pagenavi span.current {
    text-decoration: none;
    background: #CF5912 !important;
    border: 1px solid #993206!important;
    color: #fff !important;
    padding: 4px 8px !important;
    display: block;
    text-align: center;
    float: centre;
    display: inline;
    margin-right: 6px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    font-size:0.75em;
}

.wp-pagenavi span.extend {
    text-decoration: none;
    background: #FFD000 !important;
    border: 1px solid #E8B900 !important;
    color: #fff !important;
    padding: 4px 8px !important;
    display: block;
    text-align: center;
    float: centre;
    display: inline;
    margin-right: 6px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    font-size:0.75em;
}
4
htmlcsswordpress
Try adding #submenu li a {font-size: .75em;} – Jason Yaraghi
No just add it as a separate ruleset. – Jason Yaraghi

4 Answers

2
votes

Try and change the font-size. You can change this in the #botmenu or in the #submenu

#botmenu {
    font-size: 90%; /*the smaller the percentage, the smaller the text*/
}

OR

#submenu {
    font-size: 90%; /*the smaller the percentage, the smaller the text*/
}
1
votes

If #submenu li a {font-size: .75em;} doesnt work, try adding like this.

submenu li a {
     font-size: .75em !Important;
}
0
votes

You can also use font-size: 100%. The percentage is inherited from the parent, and you can also set 75% or 85%. I recommend you to play a bit in dev tools with this.

Cheers

0
votes

Some 'coders' might have their opinion but for me I will add a new class with !important eg;

.wp-mbfontupdate {0.75em !important}

Then add the wp-mbfontupdate class to my menubar's class. This way I can easily go to this line and update new font style later