Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 21, 2020 at 10:10 pm #1176952
    Jen

    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!

    January 23, 2020 at 8:31 am #1177436
    Jordan Shannon

    Hey Nicole,

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

    Best regards,
    Jordan Shannon

    January 23, 2020 at 9:30 pm #1177889
    Jen

    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, 6 months ago by Jen.
    January 25, 2020 at 9:40 pm #1178404
    Mike

    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

    January 27, 2020 at 7:52 pm #1178772
    Jen

    HI Mike,

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

    January 28, 2020 at 1:20 pm #1178991
    Mike

    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

    January 28, 2020 at 6:04 pm #1179111
    Jen

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

    January 29, 2020 at 11:31 am #1179366
    Mike

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

    Best regards,
    Mike

    January 29, 2020 at 6:45 pm #1179514
    Jen

    Yes, thanks.

    January 30, 2020 at 11:04 am #1179764
    Mike

    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

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