Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #166162
    carolinec
    Participant

    Hi
    I am new to wordpress and catch themes so I hope you can help.

    http://caclearning.site/

    Apologies if each question should have been under a different topic

    1. How do I change the colour of the Menu from the Red colour which also appears on selection
    2. I need to put social icons ie.twitter etc in line with the menu say in the center or move menu location to the left and put the icons on the far right.

    #166166
    Skandha
    Participant

    @carolinec: Hello there,
    To change the color of menu items
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    a:focus, a:hover, #feature-slider-section .entry-title a:hover, #feature-slider-section .entry-title a:focus, .menu-toggle:hover, .menu-toggle:focus, .dropdown-toggle:hover, .dropdown-toggle:focus, .search-submit:hover, .search-submit:focus, .entry-meta a:hover, .entry-meta a:focus, .site-info a:hover, .site-info a:focus, #search-toggle, #share-toggle, .main-navigation ul :hover > a .main-navigation ul :hover > a, .main-navigation ul .focus > a, .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .site-header-cart .cart-contents:hover, .site-header-cart .cart-contents:focus, .site-header-menu .social-navigation a:hover, .site-header-menu .social-navigation a:focus, .absolute-header .site-header-menu .social-navigation a:hover, .absolute-header .site-header-menu .social-navigation a:focus, .absolute-header .menu-toggle:hover, .absolute-header .menu-toggle:focus, .absolute-header .site-header-cart .cart-contents:hover, .absolute-header .site-header-cart .cart-contents:focus, .site-navigation .current-menu-item > a, .site-navigation .current-menu-ancestor > a, .navigation-classic.absolute-header .main-navigation ul ul :hover > a, .navigation-classic.absolute-header .main-navigation ul ul .focus > a, .post-navigation a:hover .nav-title, .post-navigation a:focus .nav-title, .section .section-title a:hover, .section .section-title a:focus, .section .entry-title a:hover, .section .entry-title a:focus, #testimonial-content-section .cycle-prev:hover, #testimonial-content-section .cycle-prev:focus, #testimonial-content-section .cycle-next:hover, #testimonial-content-section .cycle-next:focus, #events-section.has-background-image .entry-meta a:hover, #events-section.has-background-image .entry-meta a:hover, #events-section.has-background-image .entry-meta a:focus, #events-section.has-background-image .entry-meta a:focus, #events-section.has-foreground-image .entry-meta a:hover, #events-section.has-foreground-image .entry-meta a:hover, #events-section.has-foreground-image .entry-meta a:focus, #events-section.has-foreground-image .entry-meta a:focus, #events-section.has-background-image .entry-title a:hover, #events-section.has-background-image .entry-title a:hover, #events-section.has-background-image .entry-title a:focus, #events-section.has-background-image .entry-title a:focus, #events-section.has-foreground-image .entry-title a:hover, #events-section.has-foreground-image .entry-title a:hover, #events-section.has-foreground-image .entry-title a:focus, #events-section.has-foreground-image .entry-title a:focus, #portfolio-content-section .entry-title a:hover, #portfolio-content-section .entry-title a:focus, #portfolio-content-section .hentry-inner:hover .entry-title, #portfolio-content-section .hentry-inner:hover .entry-title a, .team-content-wrapper .hentry-inner:hover .entry-title a, .team-content-wrapper .hentry-inner:focus .entry-title a, .audioman-mejs-container.mejs-container button:hover, .audioman-mejs-container.mejs-container button:focus, #top-playlist-section .audioman-mejs-container.mejs-container .mejs-controls .mejs-playpause-button.mejs-button button:hover, #top-playlist-section .audioman-mejs-container.mejs-container .mejs-controls .mejs-playpause-button.mejs-button button:focus, table.shop_table_responsive tr td a:hover, table.shop_table_responsive tr td a:focus, .product-container a.added_to_cart:hover, .product-container a.added_to_cart:focus, .single-product .product_meta a:hover, .single-product .product_meta a:focus, .single-product div.product .woocommerce-product-rating .woocommerce-review-link:hover, .single-product div.product .woocommerce-product-rating .woocommerce-review-link:focus, .woocommerce-info a:hover, .woocommerce-info a:focus, .woocommerce-tabs ul.tabs li a:hover, .woocommerce-tabs ul.tabs li a:focus, .variations .reset_variations:hover, .variations .reset_variations:focus, .navigation-classic .main-navigation ul :hover > a, .navigation-classic .main-navigation ul .focus > a {
    	color:#1ff980;
    }

    You can change the color according to your choice.

    The feature to have social menu icons adjacent to the menu items is only available in pro version of the theme. I suggest you to upgrade to pro. You can check out the additional-features available in pro version of the theme.

    Let me know if this helps you out!
    Kind Regards,
    Skandha

    #166501
    carolinec
    Participant

    Thank you for your reply but when I entered text in CSS it came back with errors. So didn’t click to update in case i messed anything up.

    #166502
    carolinec
    Participant

    It was underlining in red the & and ;

    If you can help that would be great

    #166614
    Skandha
    Participant

    @carolinec: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    a:focus, a:hover, #feature-slider-section .entry-title a:hover, #feature-slider-section .entry-title a:focus, .menu-toggle:hover, .menu-toggle:focus, .dropdown-toggle:hover, .dropdown-toggle:focus, .search-submit:hover, .search-submit:focus, .entry-meta a:hover, .entry-meta a:focus, .site-info a:hover, .site-info a:focus, #search-toggle, #share-toggle, .main-navigation ul :hover > a .main-navigation ul :hover > a, .main-navigation ul .focus > a, .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .site-header-cart .cart-contents:hover, .site-header-cart .cart-contents:focus, .site-header-menu .social-navigation a:hover, .site-header-menu .social-navigation a:focus, .absolute-header .site-header-menu .social-navigation a:hover, .absolute-header .site-header-menu .social-navigation a:focus, .absolute-header .menu-toggle:hover, .absolute-header .menu-toggle:focus, .absolute-header .site-header-cart .cart-contents:hover, .absolute-header .site-header-cart .cart-contents:focus, .site-navigation .current-menu-item > a, .site-navigation .current-menu-ancestor > a, .navigation-classic.absolute-header .main-navigation ul ul :hover > a, .navigation-classic.absolute-header .main-navigation ul ul .focus > a, .post-navigation a:hover .nav-title, .post-navigation a:focus .nav-title, .section .section-title a:hover, .section .section-title a:focus, .section .entry-title a:hover, .section .entry-title a:focus, #testimonial-content-section .cycle-prev:hover, #testimonial-content-section .cycle-prev:focus, #testimonial-content-section .cycle-next:hover, #testimonial-content-section .cycle-next:focus, #events-section.has-background-image .entry-meta a:hover, #events-section.has-background-image .entry-meta a:hover, #events-section.has-background-image .entry-meta a:focus, #events-section.has-background-image .entry-meta a:focus, #events-section.has-foreground-image .entry-meta a:hover, #events-section.has-foreground-image .entry-meta a:hover, #events-section.has-foreground-image .entry-meta a:focus, #events-section.has-foreground-image .entry-meta a:focus, #events-section.has-background-image .entry-title a:hover, #events-section.has-background-image .entry-title a:hover, #events-section.has-background-image .entry-title a:focus, #events-section.has-background-image .entry-title a:focus, #events-section.has-foreground-image .entry-title a:hover, #events-section.has-foreground-image .entry-title a:hover, #events-section.has-foreground-image .entry-title a:focus, #events-section.has-foreground-image .entry-title a:focus, #portfolio-content-section .entry-title a:hover, #portfolio-content-section .entry-title a:focus, #portfolio-content-section .hentry-inner:hover .entry-title, #portfolio-content-section .hentry-inner:hover .entry-title a, .team-content-wrapper .hentry-inner:hover .entry-title a, .team-content-wrapper .hentry-inner:focus .entry-title a, .audioman-mejs-container.mejs-container button:hover, .audioman-mejs-container.mejs-container button:focus, #top-playlist-section .audioman-mejs-container.mejs-container .mejs-controls .mejs-playpause-button.mejs-button button:hover, #top-playlist-section .audioman-mejs-container.mejs-container .mejs-controls .mejs-playpause-button.mejs-button button:focus, table.shop_table_responsive tr td a:hover, table.shop_table_responsive tr td a:focus, .product-container a.added_to_cart:hover, .product-container a.added_to_cart:focus, .single-product .product_meta a:hover, .single-product .product_meta a:focus, .single-product div.product .woocommerce-product-rating .woocommerce-review-link:hover, .single-product div.product .woocommerce-product-rating .woocommerce-review-link:focus, .woocommerce-info a:hover, .woocommerce-info a:focus, .woocommerce-tabs ul.tabs li a:hover, .woocommerce-tabs ul.tabs li a:focus, .variations .reset_variations:hover, .variations .reset_variations:focus, .navigation-classic .main-navigation ul :hover > a, .navigation-classic .main-navigation ul .focus > a {
    	color:#1ff980 !important;
    }

    Let me know if this works out!
    Kind Regards,
    Skandha

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Audioman Menu colour Menu Position and adding icons’ is closed to new replies.