Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • February 20, 2024 at 11:49 am #1434886
    keukenk

    Hi there!

    I am using a fullwidth submenu on one of my clients pages where the menuitems link to different topics on that same page (like you would on a single page website). Because I can’t get some of the rows/elements to show the way I want them on smaller devices, I made two versions of them. Hiding the one from bigger devices and the other from smaller devices. But this causes that my submenu doesn’t work anymore on smaller devices because the menu is linked to the rows/elements I have visible for the bigger devices. That’s why I would like to make two versions of the submenu aswell, but I can’t seem to hide the submenu element through its responsive settings… Any suggestions on how to get the right results?

    Please take a look at the page on a desktop and on a phone, so you can see that the submenu isn’t working on the small device.

    February 20, 2024 at 2:42 pm #1434905
    Rikard

    Hey keukenk,

    You can add an ID or class to it in the Developers settings, then use CSS like this:

    
@media only screen and (max-width: 767px) {
#your-id {
  display: none; 
}

.your-class {
  display: none; 
}
}

    Best regards,
    Rikard

    February 28, 2024 at 2:48 pm #1435755
    keukenk

    Hi again,

    I have now added the following custom CSS:

    @media only screen and (max-width: 767px) {
    #submenu-mobiel {
    display: none;
    }

    @media only screen and (min-width: 768px) {
    #submenu-desktop-tablet {
    display: none;
    }

    The first one, for phones and tablets in portrait view seems to work as one of the submenu elements dissapears. Only problem is that is now shows a white area where the element used to be… Is there a way to remove this?

    Also, the second one, for tablets in landscape view and desktop doesn’t seem to work. It still shows both submenu elements. Did I do something wrong?

    Please use the same url for reference as before to see the results.

    February 28, 2024 at 2:49 pm #1435756
    keukenk

    Sorry, I had written the ID’s the wrong way around in the ticket ;) In the CSS I added it is the correct way.

    February 28, 2024 at 7:11 pm #1435796
    Rikard

    Hi,

    Please add this in the first CSS block, inside of the media query:

    .page-id-3768 .sticky_placeholder {
  height: 0 !important;
}

    If you want your media queries to affect tablets as well, then please change the first pixel value to 990 for example, and the second one to 991.

    https://www.w3schools.com/css/css3_mediaqueries.asp

    Best regards,
    Rikard

    March 4, 2024 at 2:02 pm #1436257
    keukenk

    With the extra CSS it hides the white empty space, thanks. I have also changed the media values to fit the mobile screens (479 & 480)

    I am still dealing with the following issues:
    1. On desktop and tablet screens it still shows both submenus instead of hiding the mobile version of the submenu
    2. On desktop and tablet screens it is the mobile version that becomes sticky, so that won’t work properly

    March 5, 2024 at 9:12 am #1436342
    Rikard

    Hi,

    Please try this CSS as well:

    @media only screen and (min-width: 991px) {
#submenu-desktop-tablet {
  display: none;
}
}

    Best regards,
    Rikard

    March 6, 2024 at 1:37 pm #1436497
    keukenk

    Hi there,

    The last css didn’t seem to change anything unfortunately. I still have the same remaining 2 issues from my last message. Here is what is currently in my customizer:

    @media only screen and (max-width: 479px) {
    #submenu-desktop-tablet {
    display: none;
    }
    .page-id-3768 .sticky_placeholder {
    height: 0 !important;
    }

    @media only screen and (min-width: 480px) {
    #submenu-mobiel {
    display: none;
    }

    @media only screen and (min-width: 991px) {
    #submenu-desktop-tablet {
    display: none;
    }

    March 6, 2024 at 5:46 pm #1436520
    Rikard

    Hi,

    I can’t see that you are closing any of your media queries, please try doing so. In short; you are missing a closing curly bracket at the end of each media query.

    Best regards,
    Rikard

    March 7, 2024 at 10:11 am #1436587
    keukenk

    Ah yes! I’m sorry, my bad… Now it shows the right menu on all the screens. 2 little problems left :)
    1. It now still shows white space on desktop and tablet.
    2. except for the desktop the menu isn’t sticky, eventhough the sticky setting is on.

    March 9, 2024 at 11:46 am #1436798
    Rikard

    Hi,

    1. I can’t see this CSS applying anymore, could you check that you have added it correctly?

    .page-id-3768 .sticky_placeholder {
  height: 0 !important;
}

    2. That setting is not active on mobile devices, as it setting description says:

    This option is ignored when burger menu icon is shown.

    Best regards,
    Rikard

    March 12, 2024 at 1:09 pm #1437035
    keukenk

    1. is now working great, thanks!
    2. I saw this option, but in the advanced settings of the submenu I am using the option to show the full menu instead of a button, so there is no burger menu icon in this situation? This is why I assumed it would still work sticky?

    March 12, 2024 at 7:35 pm #1437084
    Rikard

    Hi,

    No that is not the case, it’s ignored on mobile sizes.

    Best regards,
    Rikard

    March 13, 2024 at 3:15 pm #1437141
    keukenk

    Oke thanks for all the help! :)

    March 13, 2024 at 5:58 pm #1437165
    Rikard

    Hi,

    Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.