Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #932601

    Hi Enfold team!

    I would like to request for assistance on how to display two different menus for this website I am doing for a client:

    Menu one should is the default menu on the homepage: white text, white logo, green background

    I would like to create another menu which has: green text, green logo, white background. They will be displayed on other internal pages.

    Here’s what the second menu would look like, ideally

    http://prntscr.com/iw2qs2

    Is this something you can assist me with? I am guessing this is a complicated fix, if it is, can you offer some advice or workaround to achieve this feature?

    Thank you so much!

    #932872

    Hey hackoffseries,

    I don’t think you need a different menu if both menus have same links, just different colors. I would suggest setting your main menu color for internal pages, then post back here once done, then we’ll try to give you css code to adjust the homepage main menu background and text color.

    Best regards,
    Nikko

    #932882

    Well – first of all the landing pages and the other pages are transparent headers.
    So the contact page is the one to turn vice versa ?
    For transparent options on the other page you must have different rules again

    For the logo you had to have the invers logo and to know on what pages this logo and the css underneath you like to have
    for logo you can add this to functions.php of your child-theme:

    add_filter('avf_logo','av_change_logo');
    function av_change_logo($logo)
    {
        if( is_page(21) ) {
        $logo = "http://www.domain.com/wp-content/uploads/logoforpage21.jpg"; 
            }
        elseif ( is_page( array( 42, 54, 6 ) ) ) {
        $logo = "http://www.domain.com/wp-content/uploads/logoforpage22.jpg"; 
            }
        return $logo;
    }

    you can do it with the whole bunch of conditional tags

    for css you had to specify this rules to the pages you want them to be changed:

    .header_bg {
        background-color: #fff !important;
    }
    #avia-menu .avia-menu-text {
        color: #25604a;
    }
    .av_seperator_small_border .av-main-nav > li > a > .avia-menu-text {
        border-color: #25604a !important;
    }
    #933074

    Hi,

    Thanks for sharing @guenni007 :-)

    Best regards,
    Rikard

    #933510

    if these are a lot of pages – quick css code might be extensive
    you can do it via functions.php of child theme too:

    function different_header_appearance() {
    	if( is_page( array( 42, 54, 6 ) ) ){
    	  echo '<style type="text/css">
    		.header_bg { background-color: #fff !important}
    		#avia-menu .avia-menu-text { color: #25604a}
    		.av_seperator_small_border .av-main-nav > li > a > .avia-menu-text { border-color: #25604a !important}
    	  </style>';
    	}
    }
    add_action('wp_head', 'different_header_appearance');

    how complex those if clauses can be see here:
    if ( is_singular( 'event' ) || is_search() || is_category() || is_page() && !is_page(1307) || is_singular( 'portfolio' ) ) etc. pp.

    #933534

    Hi,

    Thanks for sharing the tip @guenni007

    Do let us know if you need further assistance, we are happy to help you!

    Best regards,
    Vinay

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.