Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • October 13, 2023 at 6:18 pm #1422428
    mikegrace78

    Hi Team,

    On mobile only:

    Wondering if it’s possible to hide the main portion of the header, but to continue to display the very top portion with the phone number?

    If this is possible would you kindly suggest some coding that would allow me to do this? Thank you!!

    Mike

    October 14, 2023 at 11:37 am #1422456
    Rikard

    Hey Mike,

    Could you post a link to where we can see the elements in question please? If you have a screenshot highlighting your intentions, then please share that with us as well.

    Best regards,
    Rikard

    October 14, 2023 at 5:04 pm #1422477
    mikegrace78

    Here’s a link to a PNG image which shows what I’m hoping to accomplish:

    https://partners.mikegrace.ca/wp-content/uploads/2023/10/PastedGraphic-1.png

    October 14, 2023 at 6:49 pm #1422481
    Mike

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 767px) { 
	#header_main {
		display: none;
	}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    October 15, 2023 at 9:08 am #1422526
    Guenni007

    It depends a bit on what kind of header you have and what you want to achieve.
    Is it a fixed header on desktop view? Where is your navigation etc.?
    the header_meta should stay fixed in mobile view – and not scroll away…

    November 2, 2023 at 8:11 pm #1424436
    mikegrace78

    Hi Team,

    Reviving this thread as I was taken in a different direction for a couple of weeks. So far this issue is not resolved for me, and I have some confusion as I feel as though there are multiple things happening here.

    I think the simplest approach is to define what I’m hoping to achieve, and give you guys all of the access necessary to see what is happening within the site.

    I am hoping to define for mobile and tablet screens only:

    -No Burger Menu or Logo Visible in the Header
    -keep the top portion of the header with contact info

    Here is an image file of what I’m hoping to accomplish:
    https://partners.mikegrace.ca/wp-content/uploads/2023/11/PastedGraphic-1.png

    For Regular Computer Screen Size, we can display everything (logo, burger menu and contact info at top)
    – – –
    Additionally, I don’t believe my Quick CSS box is functioning… as nothing I try from the support archives seems to have any effect… any ideas on this?
    – – –
    I’ve included temporary WordPress login and FTP access below in the private content. Would really appreciate your help with this!

    Thanks, Mike!

    November 2, 2023 at 8:20 pm #1424437
    mikegrace78

    See below for website address:

    November 3, 2023 at 8:28 pm #1424597
    Rikard

    Hi,

    I’ve added this for you in Quick CSS, and it’s working:

    @media only screen and (max-width: 1024px) {
.av-logo-container {
  display: none; 
}
}

    The reason why Quick CSS didn’t work before what because you were adding rgba colour codes:

    rgba(123,176,231,0.28)

    The theme doesn’t support that, please try using the hex code instead.

    Best regards,
    Rikard

    November 3, 2023 at 10:42 pm #1424613
    mikegrace78

    Hi Rikard,

    Thank you for this. Unfortunately the top portion of the header is not visible (the area with the phone number). Would you have any suggestions to maintain the phone number and contact info at the top?

    Thanks in advance, Mike

    November 3, 2023 at 11:05 pm #1424615
    mikegrace78

    Hi Rikard,

    Please dis-regard the last message. I removed a bit of CSS and it seems to have resulted in success!

    The CSS I removed was intended to <centre> the contact info text. Would you have any different suggestions on this for me?

    Thank you!!

    November 4, 2023 at 12:36 pm #1424628
    Mike

    Hi,
    Thanks for the feedback, I looked at your page and as I understand you wish that the contact info (.phone-info) was centered, so to achieve this please try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #header_meta.av_phone_active_right .phone-info {
    float: none;
    text-align: center;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    November 6, 2023 at 6:00 pm #1424809
    mikegrace78

    Amazing thanks Mike!!!

    November 6, 2023 at 6:25 pm #1424811
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘On mobile, Hide Header except for (Very Top) Phone number Bar’ is closed to new replies.