Use both main and alternate/transparent meta and main menus on specific pages

Sorry, I don’t mean to bump this abut another really crucial issue has arisen – the entire menu disappears on mobile! I’ve tried to play around and get it to show in @media only screen and (max-width: 989px) –

    /* show main menu */
    
    #top .av_header_transparency {
        display: visible !important;
        min-height: 200px!important;
        background: red !important;
        position: fixed;
        top: 0;
    }

No luck. It seems to load and then go all black…

Hi, Mike

Mot sure… The mobile menu was there and now it’s gone. There are so many variables now, more so than ever, which doesn’t help matters.

Yes, I was hoping to have the mobile menu be sticky and visible on scroll for the home page only, and then just sticky for all other pages. Just getting it to appear again would be fine at this point.

I’m not sure why comments and empty rules contribute to any errors, if they are not applied? I’m not formally trained in css so the comments are really helpful, and I leave in the empty rules in case I need them again.

It would be a tall order to do what you suggest with my typically tight deadlines, so I guess I’ll just have to sort this out myself.

You’ve been helpful but I have other posts from days ago that have yet to be replied to, so I’m a bit frustrated about meeting my deadlines :)

Hi, Mike

I constantly watch my output for errors, so that’s not the issue. I’ve continued to work on this and for the about page on scroll the text and logo go to the non transparent styling, but I did manage to set the background to remain black. The key here is getting the transparent logo to remain on scroll… I’ll keep pulling code but if you have any insight it would be most appreciated :)

Hello! Sorry for the delay. I’ve hacked things a bit but one item remains – when mobile, the logo reverts back to the non transparent version. Here’s all of my code (functions.php and css), to help others as well:

functions.php

//--------------------------------

// hack to use trans logo

//--------------------------------

function custom_script() { ?>
    <script>
(function ($) { 
  $(window).load(function() {    
        $("#top.page-id-932 #header").addClass('av_header_transparency');
        $('#top.page-id-932 .logo').append('<span class="subtext"><img src="https://oneoakaustin.com/wp-content/uploads/2021/07/One-Oak-Bouldin-Creek-logo-transparent.svg" class="alternate" alt="Corporate logo" title=""></span>');
  });
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

and my css:

/**************************************************

logo swap hack in functions.php addition

- home option page - 932

#header_main bg needs to be transparent

**************************************************/

#top.page-id-932 #header.av_header_transparency,
#top.page-id-932 .av_header_transparency #header_main {
    /* background: rgba(0, 0, 0, 0.5)!important; */
}

/* force main bg on scrolling */

#top.page-id-932 .header_color .header_bg {
	/* background: #4a4747!important;  dk mushroom */
}

/* force pancake lines closed  */
    
#top.page-id-932 .header_color .av-hamburger-inner,
#top.page-id-932 .header_color .av-hamburger-inner::before,
#top.page-id-932 .header_color .av-hamburger-inner::after {
        background-color: #c6b193 !important; /* taupe */
    }

/* force widget custom reg button */

#top.page-id-932 #header.header_color #header_main .widget a.buW2 {
    border: 1px solid #f2efee !important; /* off white */
    color: #f2efee !important; /* off white */
    background: #4a4747!important; /*  dk mushroom */
    margin-right: 50px !important;
    margin-top: 43px !important;
    width: 300px !important;
}

/* force pages to have a different bg after scrolling  */

.page-id-932 #header_main {
	background: #4a4747!important; /*  dk mushroom */
}

/* custom main menu for alternate - before and after scrolling */

#top .page-id-932 .av-main-nav>li.current-menu-item>a>.avia-menu-text,
#top .page-id-932 .av-main-nav>li.current-page-ancestor>a>.avia-menu-text {
  color: red!important;
}

#top .page-id-932 .av-main-nav li a:hover .avia-menu-text,
#top .page-id-932 .av-main-nav li.current-menu-item > a > .avia-menu-text {
    color: blue !important;
}

#top .page-id-932 .av-main-nav>li.current-menu-item>a>.avia-menu-text,
#top .page-id-932 .av-main-nav>li.current-page-ancestor>a>.avia-menu-text {
  color: blue !important;
}

/* smallest portrait phones *************************************************/

@media only screen and (max-width: 767px) {
    
	/* start max 767 */
    
    
 #top.page-id-932 .responsive .logo img,
    .responsive.html_mobile_menu_tablet #top.page-id-932 .av_header_transparency.av_alternate_logo_active .logo a > img {
    height: 50px !important;
    width: auto!important;
    max-width: 100%;
    display: block;
    margin: 0px !important;
    /* max-height: 120px!important; */
        
        
}

  
    
    /* end max 767 */
}