Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1176952

    Hey there! I setup the split-menu header at cindyjonesassociates.com like you outlined here (Header Layout: Widget left, Logo center, widget right, menu below). Very helpful, thank you! Instead of having the logo in the center, we replaced it with the text “&”.

    Here is the problem. If you view the site on mobile, the “&” does not stick in the header on scroll. All the other components (widgets, menu) are sticking nicely.

    Here is the custom CSS for the element “&” that isn’t sticking with <position: fixed !important;>

    /*------------------------*/
    /*Header:MIDDLE "&" Symbol
    /*------------------------*/
    #header_main:after {
    font-family: 'Playfair Display', serif;
        content: '&';
        font-size: 3em;
        width: 2em;
        position: fixed !important;
        left: 49%;
        top: 10% !important;
      	color: #FF3333;
    }

    Thanks!

    #1177436

    Hey Nicole,

    I’m not seeing the “&” at all on mobile. Did you change something?

    Best regards,
    Jordan Shannon

    #1177889

    Hey Jordan, sorry you got to this ticket before I could update it. I just went hide the right side of the split menu plus the “&” symbol. It’s not essential on mobile. Thought that would be an easier solution. Only problem now is the nav links for the remaining menu (#nav_menu-2 ) containing the links About | Newsletter | Tools & Guides don’t click through on mobile and handheld.

    @media only screen and (max-width: 768px) {
    #nav_menu-2 {
        text-align: center!important; 
        width: 100%!important;
        position: sticky!important;
    }}
    
    @media only screen and (max-width: 768px) {
    #text-8 {     
        text-align: center!important;
        width: 90%!important;
        padding-top: unset!important;
        padding-bottom: 1%!important;
        padding-right: 1%!important;
        padding-left: 1%!important;
        position: sticky!important;
        float: none!important;
    }}
    
    @media only screen and (max-width: 768px) {
    #text-9 { 
        display: none!important; 
    }}
    
    @media only screen and (max-width: 768px) {
    #nav_menu-3 { 
        display: none!important; 
    }}
    
    @media only screen and (max-width: 768px) {
    #header_main:after { 
        display: none!important; 
    }}
    
    @media only screen and (max-width: 768px) {
    #header_meta { 
        display: none!important; 
    }}
    • This reply was modified 4 years, 1 month ago by Jen.
    #1178404

    Hi,
    The issue is coming from this css:

    #menu-cja-menu-left {
        position: absolute;
    }

    to correct please add this css:

    @media only screen and (max-width: 767px){
    .responsive #top #wrap_all #header_main .container {
        height: 30px !important;
    }
    #top #wrap_all #menu-cja-menu-left {
        position: relative !important; 
    }
    }

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

    Best regards,
    Mike

    #1178772

    HI Mike,

    That worked great on mobile but throws off vertical alignment for “nav_menu-2” on iPad portrait view.

    #1178991

    Hi,
    Please try adding this css:

    @media only screen and (max-width: 769px){
    .responsive #top #wrap_all #header {
        height: 150px !important;
    }
    }

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

    Best regards,
    Mike

    #1179111

    That worked! But, of course it worked. You just know your stuff….. as always. Thank you!!

    #1179366

    Hi,
    Glad to hear & thanks :)
    I assume we can close this now?

    Best regards,
    Mike

    #1179514

    Yes, thanks.

    #1179764

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Header element not sticky on mobile’ is closed to new replies.