Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 31, 2018 at 5:40 am #1003918
    Zetrh

    Hello team Kriesi. So, yesterday I took a code and put it inside “Custom CSS”, for making my “Sticky Right Sidebar Menu” to remain sticky. The code is this:

    .html_header_sidebar #top #header.av_always_sticky {
    right: 0;
}
.html_header_left #main {
    margin-left: auto;
}

.html_header_sidebar #header .av-main-nav {
    text-align: left;
}

.html_header_sidebar #top #header {
    position:fixed!important;
    width: 475px;
    position: absolute;
    min-height: 100%;
    border-bottom: none;
}

    But now, the responsive mobile menu is staying sticky as well. And it covers some of my content. Can someone help me with a code to make the responsive menu to not cover my page content? Thanks in advance

    • This topic was modified 6 years, 3 months ago by Zetrh.
    August 31, 2018 at 6:00 am #1003924
    Mike

    Hey Zetrh,
    Please try changing your code to this:

    @media only screen and (min-width: 768px) { 
.html_header_sidebar #top #header.av_always_sticky {
    right: 0;
}
.html_header_left #main {
    margin-left: auto;
}

.html_header_sidebar #header .av-main-nav {
    text-align: left;
}

.html_header_sidebar #top #header {
    position:fixed!important;
    width: 475px;
    position: absolute;
    min-height: 100%;
    border-bottom: none;
}
}

    Best regards,
    Mike

    August 31, 2018 at 6:22 am #1003928
    Zetrh

    Hey Mike, Thanks for the reply. The code I gaved you on my first post, it made my right sidebar menu, on the laptop/monitor devices stay sticky, as I wanted from the start. But instead, it made my mobile menu go nuts and cover my page elements, while is sticky. I don’t want that. I want that mobile menu to be normal. The code you gaved me, it makes mobile menu normal, but instead makes the right sidebar menu on the laptop/monitor devices return as they initial where: not sticky. :(

    September 1, 2018 at 2:18 am #1004253
    Mike

    Hi,
    Ok, I will try again. But right, from the link above, now I’m only getting a landing page with a overlay menu instead of the flyout menu.

    Best regards,
    Mike

    September 1, 2018 at 2:31 am #1004256
    Zetrh

    Hey, Mike – Thanks for the answer.
    I will give you a link where to look, although the mobile menu is sticky on every page. Please remember that the website is in ongoing creation so the pages changes from time to time. All but the shop page, which I will give link in the private content.
    *My problem is with the mobile menu bar that stays sticky and cover part of my page content. Now, with the left sidebar on sticky, from the Enfold Theme Options -> Logo and Main Menu, that dose not happen. Only with the right sidebar on and the code I gaved you above.
    Thanks again for the answer and for your time.

    September 1, 2018 at 11:52 am #1004310
    Mike

    Hi,
    Please try removing your code above and use this code instead:

    @media only screen and (min-width: 768px) { 
.html_header_sidebar #top #header.av_never_sticky {
    position: fixed!important;
}
}

    If this doesn’t help, please leave your code removed so I can test without it.

    Best regards,
    Mike

    September 1, 2018 at 12:26 pm #1004324
    Zetrh

    Unfortunately it didn’t worked. :( I removed all the code. It’s all yours

    • This reply was modified 6 years, 3 months ago by Zetrh.
    September 1, 2018 at 12:46 pm #1004330
    Mike

    Hi,
    Thank you for removing it. When testing this code:

    @media only screen and (min-width: 768px) { 
.html_header_sidebar #top #header.av_never_sticky {
    position: fixed!important;
}
}

    the mobile menu is not sticky, and at tablet and above the sidebar menu is sticky.
    Perhaps when you tested it you needed to clear your cache, or there is an error in your css.
    If you include a admin login we could take a look.

    Also with this code your logo shows on the mobile menu, did you want that?

    Best regards,
    Mike

    September 1, 2018 at 12:51 pm #1004332
    Zetrh

    Hey Mike, sure thing. I will leave all the credentials in privatate content and I’ve added all the code back

    ps. sure, if the logo shows without any intrude to the menu, of course. But mainly, what i need is that the right side bar menu to remain sticky on the monitor devices, while on mobile the menu stays as ussual

    • This reply was modified 6 years, 3 months ago by Zetrh.
    September 1, 2018 at 1:27 pm #1004344
    Mike

    Hi,
    Thanks, the issue was your string of dashs in your css, I commented it out like this

    /*--------*/

    and now the code I added works, Please clear your browser cache and check.

    Best regards,
    Mike

    September 1, 2018 at 1:31 pm #1004352
    Zetrh

    Perfectly and smooth. Thanks a lot for your help. I’m a noob in coding and things like this but i try to learn. :D thanks again for your help and time

    September 1, 2018 at 1:49 pm #1004357
    Mike

    Hi,
    Glad we could help, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,
    Mike

    September 1, 2018 at 1:50 pm #1004358
    Zetrh

    nothing else. you can close the thread and thank you again :D

    September 1, 2018 at 1:56 pm #1004363
    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 under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘"Responsive Mbile Menu" – is sticky’ is closed to new replies.