How do I change the font size of the top bar?

Most modern browsers have a developer tool that allows you to right click on an element of a page and view the CSS that affects that element. You may need to enable the developer tools first to have access to it.

For example, in Safari I can right click on the top bar, and choose Inspect Element.

From there I can see that the font size for that element is being set at line 513 in style.css. It is being set to 14px. Change that to what you want.

Repeat that procedure for all the other elements you want to change.

Thanks Matt. I could change the font.

I however have a windows based system. After inspecting the elements with firebug, i am unable to see the color option for the Top bar or navigation menu text.

How do I do that?

KM

For number 1, do you mean change the part that says “A single search engine for updates…”

If so, you need to add this custom CSS, but change the value to whatever you would like.

.site-description {
  font-size: 18px;
}

For the main navigation, add this custom CSS and change the value to what you would like for both the size and the colour.

#menu-main-navigation-menu li a {
  color: #ffffff !important;
  font-size: 17px;
}

For no.4, again add this custom CSS but change the hex value to whatever colour you would like it to be:

.widget > ul li::before, .widget > ul li a::before, .widget > div > ul li a::before {
  color: #000000 !important;
}

Hopefully that covers it all.

remember to add custom CSS into either a “custom css” area of your theme or into your style.css file if using a child theme. There are plugins that allow you to add custom css too.

Thanks Innuvo

For 1 … I meant the top bar which says… Google, PubMed and ONE network.

Rest of them have worked fine. Thanks

KM

Ok, for that you need to add this css, similar to before:

#menu-top-bar-menu li a {
  color: #ffffff !important;
  font-size: 17px;
}

Change the values to whatever you like again

Thanks again.

I was trying to change my Title image using

.site-title a img {
max-height: 70px;
}

I want to get it to

.site-title a img {
max-height: 85px;
}

but unable to do it.

Can you please help me?

Thanks