Home Forums Porto Template Changing the down arrow colour on top navigation bar on hover

This topic contains 4 replies, has 2 voices, and was last updated by  Support2 2 days, 4 hours ago. This post has been viewed 58 times

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #10022369

    jmanf47
    Participant

    Hi

    I have different sections on the website and am using different colours for the top nav bar to identify. (i.e. primary/secondary/tertiary)

    All is well except when hovering over main menu items with sub-menu. Then the down arrow always shows in the primary colour.

    I have a different custom css for each section. I have tried changing the colour of .fa-caret-down to the colour I want but this does not work. e.g

    #header .header-nav-main nav > ul > li > a.dropdown-toggle .fa-caret-down {

    color: #49509e;
    }

    Please can you help?

    Many thanks

    jmanf47



    Template Version: 5.7.2
    #10022377

    Support2
    Keymaster

    Hello jmanf47,

    Porto have two elements for arrows, one for mobile and other for non-mobile. Here is the code that you need in (css/custom.css):

    /* Change arrow color that appears on non-mobile */
    #header .header-nav-main nav > ul > li > a.dropdown-toggle:after {
    	border-color: #49509e transparent transparent transparent !important;
    }
    
    /* Change arrow color that appears on mobile */
    #header .header-nav-main nav > ul > li > a.dropdown-toggle .fa-caret-down {
    	color: #49509e;
    }

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10022407

    jmanf47
    Participant

    Hi Rodrigo

    Thank you very much, I have included the code in the css file, but I am still having problems.

    Please see the URL, I have taken screen snips of the Navigation bar with
    – no hover on menu
    – hover on main menu item
    – hover on sub-menu item

    Screen snips of  top navigation bar - no hover, hover on main item and hover on sub-menu item

    Many thanks

    Jane


    #10022408

    jmanf47
    Participant
    This reply has been marked as private.
    #10022415

    Support2
    Keymaster

    Hello,

    It’s caused by conflict with custom-skin.css. To fix, please replace all my last code for you by this new below (in custom.css):

    #header .header-nav-main nav > ul > li > a.dropdown-toggle:after {
    	border-color: red transparent transparent transparent !important;
    }
    
    #header .header-nav-main nav > ul > li:hover > a.dropdown-toggle:after {
    	border-color: #9f9f9f transparent transparent transparent !important;
    }
    
    #header .header-nav-main nav > ul > li:hover > a {
    	color: #9f9f9f !important;
    }
    
    #header .header-nav-main nav > ul > li > a.dropdown-toggle .fa-caret-down {
    	color: #9f9f9f;
    }
    
    @media(max-width: 767px) {
    	#header .header-nav-main nav > ul > li > a {
    		color: #9f9f9f !important;
    	}
    }

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


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