Some type malfunctions in mobile view

OK tinkered much more. Removing all of my old css one a a time and replacing them and I figured out the issue with pages having the headlines shift up.

Using your code:

@media only screen and (max-width:767px){
#top .av_header_glassy.av_header_transparency .header_bg {
background-color: transparent;
opacity: 1;
}
#top #wrap_all .header_color.av_header_transparency {
color: #fff;
}
#top .av_header_transparency {
background: rgba(24, 24, 24, 0) !important;
}
#top #wrap_all .header_color div .av-hamburger-inner,
#top #wrap_all .header_color div .av-hamburger-inner::before,
#top #wrap_all .header_color div .av-hamburger-inner::after {
background: #7c6853;
}
#top .av_header_transparency .header_color div .av-hamburger-inner,
#top .av_header_transparency .header_color div .av-hamburger-inner::before,
#top .av_header_transparency .header_color div .av-hamburger-inner::after {
background: #ffffff;
}
}

Worked great though except the header in mobile view was solid black, so I changed this to match the desktop:

background: rgba(24, 24, 24, .32) !important;

This to match the translucent on the desktop version, but the mobile header stayed solid black so I added this prior to the other css:

@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency {
background: transparent;
position: absolute!important;
}}

Now it all works, however…

I’m thinking it might be best practice to combine these into one increment of css.

On the other hand it it ain’t broken don’t fix might prevail here.

What are your thoughts?

Thanks so much once again.

Tony

HI again,

This site has been quite an adventure. Some of the issues where from the server side at Hostgator apparently. I deleted the site for a while and we saw odd things on default, fresh installation of wordpress running the default theme. That seems to be rectified now.

Anyway where we stand now is the site is functioning mostly correctly, however I need the menu on the mobile version to be translucent like it is on the desktop version and sticky, then when you scroll up it becomes more white but still slightly translucent as you can see on the desktop version. Adding the sticky menu css I find online for the mobile version now has no effect at present, I wonder if it conflicts with the other code somehow? Right now when the mobile version scrolls up the menu is switching to the white, but in both the initial phase and the scrolled up phase it is not translucent, and as I mentioned it isn’t sticking.

Here is the css in place which references the menus on the site:

/* top menu bar transparency*/
#top .av_header_transparency {
background: rgba(24, 24, 24, 0.32) !important;
}

@media only screen and (max-width:767px){
#top .av_header_glassy.av_header_transparency .header_bg {
background-color: transparent;
opacity: 1;
}
#top #wrap_all .header_color.av_header_transparency {
color: #fff;
}
#top .av_header_transparency {
background: rgba(24, 24, 24, 0.32) !important;
}
#top #wrap_all .header_color div .av-hamburger-inner,
#top #wrap_all .header_color div .av-hamburger-inner::before,
#top #wrap_all .header_color div .av-hamburger-inner::after {
background: #7c6853;
}
#top .av_header_transparency .header_color div .av-hamburger-inner,
#top .av_header_transparency .header_color div .av-hamburger-inner::before,
#top .av_header_transparency .header_color div .av-hamburger-inner::after {
background: #ffffff;
}

}

/* smaller menu mobile*/
@media only screen and (max-width: 767px){
.responsive .logo img {
max-width:20%!important;
}
.responsive #header_main .container {
height:79px!important;
}
}

I’ve reset the user login for you below.

Thanks so much, this one has me chasing my tail.

Tony

I’ve rest the login for you, please let me know if it works.

Hi Ismael,

Thanks for the sticky menu, but the issue happens again on pages without a color section up top the headline moves up behind the menu. See here:

https://specinv.com/wp-content/uploads/2020/03/IMG_1533.png

I had it to this point before but I am reticent to fix the issue by adding space above these sections as I don’t know why it’s happening.

Thanks,

Tony