Where do I write additional CSS?

  • Resolved hotchoco

    (@hotchoco)


    2 years, 7 months ago

    Hi. I installed Spectra One recently and enjoying it so far.

    I want to make hover on the navigation menu links in header.
    I tried the following, it didn’t work 🙁 Please help.

    1. Created a child theme of Spectra One. (used Create Block Theme plugin.)
    2. Added class “nav-menu” on the navigation block.
    2. Added below CSS on themes> spectra-one-child>style.css

    CSS I wrote:

    .nav-menu a {
    color: red !important;
    }
    .nav-menu a:hover {
    color: blue !important;
    }

Viewing 6 replies - 1 through 6 (of 6 total)
  • Mohsin Ghouri

    (@mohsinbsf)

    2 years, 7 months ago

    Hi @hotchoco,

    Thanks for getting in touch with us.

    Please add the below CSS code by going to the editor and editing the header template. You can see the additional CSS section with a click on the three vertical dots appearing at the top of the page.

    header .wp-block-navigation-item__content{color: red !important;}

header .wp-block-navigation-item__content:hover{color: blue !important;}

    Please try and let me know how it goes.

    Have a nice day!

    Thread Starter hotchoco

    (@hotchoco)

    2 years, 7 months ago

    Hi,
    I do not see “additional CSS section” when I click on the three vertical dots appearing at the top of the page.
    I also have the Spectra plugin installed, and [Custom CSS] is on on that settings. What am I missing?

    Thread Starter hotchoco

    (@hotchoco)

    2 years, 7 months ago

    Hi mohsinbsf,

    I found it under style settings. It worked! Thanks 🙂

    Mohsin Ghouri

    (@mohsinbsf)

    2 years, 7 months ago

    Hi @hotchoco,

    I am glad it is working for you.

    Please mark this thread resolved and feel free to open a new thread if you face any other issues.

    Thanks

    Anonymous User 17785837

    (@anonymized-17785837)

    2 years, 1 month ago

    Hi @mohsinbsf
    I added your Additional CSS code and it worked. However, I wanted to add code for the active link.
    So, I added code below after your hover code in Additional CSS :

    header .wp-block-navigation-item__content:active{color: #F99417 !important;}

    But it didn’t work and not sure why.
    Can you help?

    Mohsin Ghouri

    (@mohsinbsf)

    2 years ago

    Hi @peaky56,

    Would you please start your own thread?

    Let’s help the forum stay “clean” as per the forum guidelines.

    Have a nice day!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Where do I write additional CSS?’ is closed to new replies.