Changing font and text background for top navigation menu

Posted in: Newspaper
Post count: 90
Vesa
#41632
Mar 17, 2015 at 2:43 am

Our site’s top navigation menu (Header Menu (main), Top Header Menu) contains links to categories such as “Domestic News”, “Foreign News”, “Economy”, etc.

By default, the menu texts’ font does not quite match what we would like the menu texts to look like.

In addition, we’d like to use a coloured background for the “HOME PAGE” text link in the top navigation menu.

How could the menu font and text background color be changed?

  • This topic was modified 11 years by Vesa.
Post count: 7909
Alin [tagDiv]
#41649
Mar 17, 2015 at 9:14 am

Hi,

Please use Theme Panel > Custom Typography to change the font for your menu: http://screencast.com/t/Sf3u6QCJcz
Also you can change/add background color for menus from Theme Panel > Theme Colors: http://screencast.com/t/O8tNMLZcwvdJ
If you want to use a different background only for your homepage you can do this only with css: http://screencast.com/t/wJAEqAd53Y5

.home.td-full-layout .td-header-menu-wrap{
background-color: green !important;
}
.home.td-full-layout .td-menu-background{
background-color: blue !important;
}

Hope this helps!

Post count: 90
Vesa
#41665
Mar 17, 2015 at 12:16 pm

Thanks Alin!

I made several changes to Top Menu font and saved the changes.

However, when I reaload the page, nothing has changed. I have done that several times, including using Ctrl-F5. I wonder if that could still be a cache issue.

Post count: 7909
Alin [tagDiv]
#41693
Mar 17, 2015 at 2:10 pm

Hi,

Please empty cache if you use a cache plugin and also try this without any plugins active, leave only Visual Composer active. If you still have issues with it please provide your site URL so we can inspect this.

Thanks!

Post count: 90
Vesa
#41738
Mar 17, 2015 at 10:26 pm

Just to make sure, the menu I’m referring to can be seen here:

http://aijaa.com/R4I7NT

Changing the properties of the “Top Menu font” in Theme Panel > Custom Typography has so far had no effect.

I have also encircled with red line the individual menu item (currently: the homepage symbol) that I would like to somehow highlight, so that it would stand out from the other menu items.

  • This reply was modified 11 years by Vesa.
  • This reply was modified 11 years by Vesa.
  • This reply was modified 11 years by Vesa.
Post count: 90
Vesa
#41758
Mar 18, 2015 at 8:59 am

Note: that is a screenshot of the top navigation menu area, because our site is still in development and is not publicly accessible.

Post count: 7909
Alin [tagDiv]
#41759
Mar 18, 2015 at 9:14 am

Hi,

I have seen your image and you refer to the main menu, so please make sure that you change the fonts for menu: http://screencast.com/t/p5mHbcDr – http://screencast.com/t/6hnDi1Fl

I’m not sure what you mean about homepage icon to highlight somehow, you can try to add a background color: http://screencast.com/t/fjoH1DoouO or shadow – http://screencast.com/t/vhqmAvRd0I7

.td-sp-ico-home{
background-color: rgba(247, 19, 19, 0.57);
border-radius: 3px;
}

.td-sp-ico-home{
background-color: rgba(247, 19, 19, 0.57);
-webkit-box-shadow: -5px 5px 2px -1px rgba(0,0,0,0.51);
-moz-box-shadow: -5px 5px 2px -1px rgba(0,0,0,0.51);
box-shadow: -5px 5px 2px -1px rgba(0,0,0,0.51);
}

Please change the color how you wish.

Thanks!

Post count: 90
Vesa
#41766
Mar 18, 2015 at 10:01 am

Much appreciated, Alin – I had thought that “Top Menu font” was what I needed to change (as the menu in question was called “Top Header menu”), whereas it was the “Menu font” that needed attention.

Following your instructions, I was also able to change the homepage icon’s background color and add a shadow to it.

I found this page to be of help in coming up with the right RGB value:

http://www.color-hex.com/

Viewing 8 posts - 1 through 8 (of 8 total)
The forum ‘Newspaper’ is closed to new topics and replies.