iPad or other small Screens

Nikos
Nikos Member Posts: 11

I have a question: the hamburger menu is displayed on the tablets. Normal navigation for the desktop. The change happens somewhere around 1024px. How can I create a CSS class in which I can display the tablet version of the menu (hamburger menu) up to a screen size of 1200 or more pixels? It has something to do with minimum width and maximum width, but I just can't get it right.

not for websites in flex mode but for the classic duda sites. The problem is that the new iPad Air doesn't show the hamburger but the classic menu. It then slides very ugly among themselves.


I am very happy about a feedback

Answers

  • community_manager
    community_manager Administrator, Moderator Posts: 297 Duda Staff

    Hi!

    You can try adding the following snippet of code to the site.css file:

    /*Hides tablet menu at 1200px and under */ 
    @media (min-width: 1201px) {
    #dmRoot.responsiveTablet #dm #dmStyle_outerContainer #dmStyle_innerContainer .showOnMedium, #dmRoot.responsiveTablet #dm .dmInner .hide-for-large {
      display: none!important;}
    }
    /*Hides desktop menu between 768px and 1200px*/
    @media (min-width: 768px) and (max-width: 1200px){
    #dmRoot.responsiveTablet #dm #dmStyle_outerContainer #dmStyle_innerContainer #hamburger-header-container~#stickyHeaderSpacer, #dmRoot.responsiveTablet #dm #dmStyle_outerContainer #dmStyle_innerContainer .showOnLarge, #dmRoot.responsiveTablet #dm .dmInner .hide-for-medium {
      display: none!important;}
    }
    /*Shows tablet header from 1025px - 1200px */
    @media (min-width: 1025px) and (max-width: 1200px){
    #dmRoot.responsiveTablet #dm #dmStyle_outerContainer #dmStyle_innerContainer .showOnMedium, #dmRoot.responsiveTablet #dm .dmInner .hide-for-large {
      display: flex!important;
      flex-direction: column!important;}
    }
    

    I tried it on a couple of templates, and it worked, but I cannot guarantee that it will work for all. Depending on the template you're using, you may need to tweak other media queries to get it to work.

    I also checked our Ideas Board and found that we have a feature request in progress to customize breakpoints. I encourage you to upvote it to be subscribed to status updates on this feature request.

  • Nikos
    Nikos Member Posts: 11

    thank you very much!!!