-
AuthorPosts
-
March 25, 2018 at 1:37 pm #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
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!
March 26, 2018 at 9:07 am #932872Hey 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,
NikkoMarch 26, 2018 at 9:21 am #932882Well – 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 againFor 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; }
March 26, 2018 at 4:27 pm #933074March 27, 2018 at 9:50 am #933510if 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.March 27, 2018 at 10:15 am #933534Hi,
Thanks for sharing the tip @guenni007
Do let us know if you need further assistance, we are happy to help you!
Best regards,
Vinay -
AuthorPosts
- You must be logged in to reply to this topic.