Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #15094

    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!

    #86182

    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?

    #86183

    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?

    #86184

    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/

    #86185

    Hey,

    @Rajkurt: Thanks for helping out. :)

    Regards,

    Ismael

    #86186

    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?

    #86187

    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!

    #86188

    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

    #86189

    Hello Ismael!

    Thank you for your response!

    Unfortunately that did not do the trick — Even adding that, Reenie Beanie overrides it.

    #86190

    Hi,

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

    Regards,

    Mya

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Menu/Sub-Menu Font & Color Changes’ is closed to new replies.