Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 11, 2023 at 6:43 am #1410204
    webbx

    Hi everybody.
    can you adjust the menus in Enfold so that they are visible at the bottom when browsing with your mobile phone?
    I have made the site a PWA but it would look more like an app if the menus were visible along the bottom when starting the app from the mobile screen.
    How do you do it, where in the settings can you change it?

    June 11, 2023 at 1:39 pm #1410221
    Mike

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

    @media only screen and (max-width: 767px){
.responsive #top #wrap_all #header {
    position: fixed;
    bottom: 0;
}
.responsive #top #wrap_all #header #av-burger-menu-ul {
	padding: 0 !important;
}
.avia-search-tooltip {
    top: -85% !important;
}
.responsive #top .avia-search-tooltip .avia-arrow {
	display: none;
}
.responsive #top #header_meta {
	z-index: 1;
}
}

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

    Best regards,
    Mike

    June 11, 2023 at 2:03 pm #1410224
    webbx

    at the bottom right I have a live chat icon covering my menus.
    Thanks for the help.
    But is it possible to move the menus to the middle?

    June 11, 2023 at 2:12 pm #1410225
    Mike

    Hi,
    Try adding this css:

    @media only screen and (max-width: 767px){
.responsive #top #wrap_all .container.av-logo-container {
    width: 70%;
    max-width: 70%;
}
}

    and adjust to suit.

    Best regards,
    Mike

    June 11, 2023 at 3:21 pm #1410231
    webbx

    is this the code for menus up or down. Can you send the code for the menus at the bottom?

    Tack för all hjälp Mike

    June 11, 2023 at 3:38 pm #1410235
    Mike

    Hi,
    Please use this css with the other css together:

    
@media only screen and (max-width: 767px){
.responsive #top #wrap_all .container.av-logo-container {
    width: 70%;
    max-width: 70%;
}
}
@media only screen and (max-width: 767px){
.responsive #top #wrap_all #header {
    position: fixed;
    bottom: 0;
}
.responsive #top #wrap_all #header #av-burger-menu-ul {
	padding: 0 !important;
}
.avia-search-tooltip {
    top: -85% !important;
}
.responsive #top .avia-search-tooltip .avia-arrow {
	display: none;
}
.responsive #top #header_meta {
	z-index: 1;
}
}

    Best regards,
    Mike

    June 11, 2023 at 3:45 pm #1410237
    webbx

    other you mean the second one or the first and second one?

    June 11, 2023 at 3:56 pm #1410240
    Mike

    Hi,
    originally I gave you this css to move the header to the bottom:

    @media only screen and (max-width: 767px){
.responsive #top #wrap_all #header {
    position: fixed;
    bottom: 0;
}
.responsive #top #wrap_all #header #av-burger-menu-ul {
	padding: 0 !important;
}
.avia-search-tooltip {
    top: -85% !important;
}
.responsive #top .avia-search-tooltip .avia-arrow {
	display: none;
}
.responsive #top #header_meta {
	z-index: 1;
}
}

    then you asked to move the menu more to the middle to make room for your live chat icon at the bottom right, so I recommend adding this css also:

    @media only screen and (max-width: 767px){
.responsive #top #wrap_all .container.av-logo-container {
    width: 70%;
    max-width: 70%;
}
}

    Best regards,
    Mike

    June 11, 2023 at 7:08 pm #1410270
    webbx

    thanks!

    June 11, 2023 at 7:11 pm #1410271
    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 10 posts - 1 through 10 (of 10 total)
  • The topic ‘menus are visible at the bottom when browsing PWA’ is closed to new replies.