• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Marek
  • Private: No
  • Open Date: 24.08.18, 16:46
  • Opened by: Lisa Keeling
  • Closed by: Marek
  • Closed on: 28.08.18, 16:58
  • Reason: Closed
  • Comment: Glad to help!

Ticket #12782 - Mobile view - issues

Hi Marek, there are two issues with the menu on mobile devices.

1. We ended up using one of your default header so there’s no option to move elements there. We would like to have transparent header for big screens (which is set up fine), but we are guessing it makes the menu on mobile devices completely useless. See image attached - referring to point nr 1.

2. Menu icon is hidden behind the search bar. How can we add some space there without affecting view on bigger devices? - point 2

Comments

Marek 28 Aug 2018, 14:24

Try this CSS:

@media (max-width:991px) {
    #header .logo {
        width: auto;
        min-width: 150px;
    }
}
body #pk_top_menu {
height: auto;
margin-bottom: 30px;
}
#index.header-absolute #header {z-index:9999}
Lisa Keeling 28 Aug 2018, 14:45

Hi Marek, thanks for the code. It looks great on mobiles. Something funny happened to header on big devices though. See image.

Marek 28 Aug 2018, 14:59

Sorry, here is correct code:

@media (max-width:991px) {
    #header .logo {
        width: auto;
        min-width: 150px;
    }
}
@media (max-width:768px) {
    body #pk_top_menu {
    height: auto;
    margin-bottom: 30px;
    }
}
#index.header-absolute #header {z-index:9999}
Lisa Keeling 28 Aug 2018, 15:32

Works fine, thank you:)