Menu/Sub-Menu Font & Color Changes

10 posts from 4 voices

• Started 9 months ago by Aspireworks227
• Latest reply from Mya
• This topic is not resolved

Tags:

No tags yet.

1. 

   Aspireworks227
   Member

   Hello there!

   I'm back once again with a new question!
   To begin, my website is ShopCirca360.com, and here is the custom CSS I have in place so far, in case any of it interferes with what I'm trying to do:

   .template-shop-single .product {
   overflow: hidden;
   clear: both;
   }

   .sub_menu {
   position: relative;
   z-index: 130;
   font-size: 11px;
   display: block;
   float: none;
   text-align: center;
   width: 220px;
   margin: 0 auto 10px auto;
   }

   .content .box {
   background: rgba(255, 255, 255, .8);
   }

   .sidebar .box,
   .sidebar #search-2,
   .sidebar #socket {
   background: #11a6b2 !important;
   }

   #top.page-id-40 .content .box {
   width: 740px;
   }

   #top.page-id-43 .content .box {
   width: 740px;
   }

   #top.page-id-46 .content .box {
   width: 740px;
   }

   #top.page-id-49 .content .box {
   width: 740px;
   }

   Finally, here is what I'm hoping to know:
   To begin, I want to change the color of the Menu description text (The text under home, about, shop, blog, contact). Right now it is a light grey that is very difficult to read. I want that to be white.

   Secondly, and I don't know if I'll need to do this, but if I do I'd like to know how:
   Can I change the color of menu text? The Home. About, Shop, Blog, Contact buttons on the menu to the left, that is.

   And lastly, I'd like to know how to change the font of the menu buttons without affecting the headlines on pages. I'd like to change this on their own without affecting anything else.

   Thanks in advance for your help!

   Posted 9 months ago #
2. 

   Rajkurt
   Member

   I dont work here, but this I might be able to help you with.

   Ad this to your quick css to make the description text white.

   .main_menu .menu li a span {
   color: #fff;
   }

   Ad this to your quick css change the color of the menu text. (Change the XXXXXX to the desired hex color value that you want)

   .main_menu .menu li a strong {
   color: #XXXXXX;
   }

   Do you want to have two different fonts on the description and on the menu text?

   Posted 9 months ago #
3. 

   Aspireworks227
   Member

   You're a saint, my friend! Thank you very much!
   Those changes the colors like a charm!

   The only thing left is changing the menu font.
   Right now it is set at Reenie Beanie, because I like that look for the headers on the pages.

   I would like to change the main menu font (The font for Home, About, SHop, etc...) to something simple like Arial or the likes.
   Might you know how to go about changing that as well?

   Posted 9 months ago #
4. 

   Rajkurt
   Member

   No problem!

   Just ad (if you want Arial to be the primary font and Helvetica Neue, helvetica or any other sans-serif font as a fallback):

   "font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;" to the quick css before the color that you just added.

   .main_menu .menu li a strong {
   font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;
   color: #XXXXXX;
   }

   A tip: http://cssfontstack.com/

   Posted 9 months ago #
5. 

   Ismael
   Moderator

   Hey,

   @Rajkurt: Thanks for helping out. :)

   Regards,
   Ismael

   Posted 9 months ago #
6. 

   Aspireworks227
   Member

   Hello Rajkurt and Ismael!

   Thank you for your response! Unfortunately, though, I'm running in to a problem still.
   It would seem that the font I sent for headings via the "Heading Font" in Flashlight > Styling is overriding what I set in custom CSS. As the page is initially loading it displays my menu fonts in Arial. However, a second later when the load finishes it switches back over to Reenie Beanie.
   Any ideas?

   Posted 9 months ago #
7. 

   Rajkurt
   Member

   I cant come up with any good sugesstion othet then to edit core in the includes/admin/menu/register-menu-walker.php file. But this you should not take my word for. Its better if you wait for the moderators to answer this. But goodluck though!

   Posted 9 months ago #
8. 

   Ismael
   Moderator

   Hi Aspireworks227,

   Have you tried to add the !important in those code that has been overrided? Try to add the !important so it won't be overriden with other codes. This is an example of how to use it;
   

   p {
      color: #000 !important;
   }

   Hope this solves the issue. :)

   Regards,
   Ismael

   Posted 9 months ago #
9. 

   Aspireworks227
   Member

   Hello Ismael!

   Thank you for your response!
   Unfortunately that did not do the trick -- Even adding that, Reenie Beanie overrides it.

   Posted 9 months ago #
10. 

    Mya
    

    Hi,

    Can you post a link to your website so we can take a look?

    Regards,
    Mya

    Posted 9 months ago #

RSS feed for this topic

Reply

You must log in to post.