Free theme : Mobile | Menu Icon & Display Issue

  • Resolved Tracy Hampton

    (@tracyhbs)


    5 years, 9 months ago

    Hi
    I have 2 issues on a mobile device for this site:

    Firstly, on a PC the Home page displays fine, albeit I’ve had to create a Menu with no pages and allocate it to the Primary Menu otherwise the page was displaying with “No menu items”. But this means on the Mobile, it shows 3 lines next to the logo (but does nothing). The Menu for the site is in the Top Bar. How can I remove this placeholder for a menu please. We actually want the logo centered, but I can’t do that as the menu is there.

    Secondly, on the classes page – again, on the PC this looks great, but on a mobile it’s all squashed. Is there someway to create a different layout for a mobile device? As in pictures with text underneath? We don’t want that for the PC version though.

    Thanks.
    Tracy

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hey,
    For one go into your theme options > custom css and add this css:

    .kad-header-right {
    display: none;
}
@media (max-width: 767px){
.kad-header-left {
    width: 100%;
}
}

    For the second you can do this, just add this css:

    @media (max-width: 767px){
.wp-block-media-text {
    display: flex;
    flex-direction: column;
}

.wp-block-media-text .wp-block-media-text__media {
    margin-bottom: 20px;
}
}

    Ben

    Thread Starter Tracy Hampton

    (@tracyhbs)

    That’s awesome! Thanks so much, the site looks fab via mobile now.
    Thanks again, I really appreciate the help.
    Tracy

    Thread Starter Tracy Hampton

    (@tracyhbs)

    Sorry Ben, can I just ask another couple of questions please….for the first part, centering the logo was for both PC and mobile (I didn’t explain that very well). Would I just remove the @media from the first CSS you gave me?

    For the second part above, how does it know to only do that on the Classes page? Looking at how great it looks, I’d like to do it for “The Team” page too. All the other pages are fine.

    Thanks.
    Tracy

    Hey,
    1. Yes then add this as well:

    #kad-banner #logo .kad-standard-logo {
    background-position: center !important;
    }

    2. With your team page, it doesn’t look like you are using the same blocks so naturally the CSS wouldn’t affect that. You do have it set to collapse though so what are you wanting to change?

    Ben

    Thread Starter Tracy Hampton

    (@tracyhbs)

    Hi.
    Sorry for the delay.

    Thanks for this. I added the above code (point 1), but it didn’t center the logo. It just broke the home slider, so I have removed it again. I’m happy for the logo to remain to the left. Easier that way.

    Thanks too re the Team page. I get it now and have managed to play with the formatting to get it to look right on mobile.

    Thanks again for your help! I really appreciate it.
    Tracy

    Hmm try adding all this together:

    #kad-banner #logo .kad-standard-logo {
    background-position: center !important;
}
.kad-header-left {
    width: 100%;
}
.kad-header-right {
   display:none;
}

    Ben

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Free theme : Mobile | Menu Icon & Display Issue’ is closed to new replies.