Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1028804

    Hey there

    The website I am trying to create has three pages. Two of the pages have multiple sections. My goal is to be able to target the various sections through the sub-menu. That in and of itself would not be a problem. Since I target the sections with a defined anchor in the respective color-section.

    Here comes the catch: Because I want the page to be responsive and look great no matter on what device and size you are looking up the page, I created per section on the page three color-sections. They are hidden or visible, dependant on the screen-size the user is looking at the page. The Problem now is, that the sub-menu-navigation works on the full width screen, but not on the medium, small or the very small screen (since the link is only responding to the first anchor).

    Do you have an Idea on how I could find a smooth solution, so the navigation would work for all the screen-sizes?

    If something is unclear in my question, let me know and i’d love to clarify.
    I will provide a temporary admin-login in the Private Content, for you to look into it.

    Looking forward to hear back from you.

    Kind regards
    Joel Berger

    #1029621

    Hey Themes_SuterGerteis,
    Sorry for the late reply, thanks for the login, I took a look at your pages and believe I understand the issue: on your 3 pages the different sections are either hidden or shown based on screen size, in order for it to look and behave well for each screen size.
    For example, on one page you have 3 IDs called “contact” and this causes the menu link to not work correctly.
    The easiest solution is to create 3 contact menu links that target the 3 color sections, each using a different ID.
    For exanple: #contact1, #contact2, #contact3
    then hide the menu items along with the color sections, here is an example of css that hides the menu item and the section at the same time:

    @media only screen and (max-width: 426px) { 
    li.menu-item-54, .page-id-39 div#kontakt {
    display: none !important;
    }
    }

    every menu item has a number and after the comma it targets the section, so it will be easy to manage.

    If you wish, I will assist on one such section, that you can model afterward for your other sections. To get started please create 3 contact menu items, each using a different anchor to each of the color sections.
    Then tell us the screen sizes you wish each of the 3 sections to show.

    Best regards,
    Mike

    #1030421

    Hy Mike

    Thank you for your reply. That would be great, if you’d assist me on one such section.
    I created the three menu items, each using a different anchor to each of the color section.

    Here are the sizes I would want each of the 3 sections to show:
    #kontakt1: wider than 990px
    #kontakt2: between 768px and 989px
    #kontakt3: smaller than 767px

    looking forward to hear back from you again.

    Kind regards,
    Joel

    #1030696

    Hi,
    Thank you for preparing the menu, since you set up the elements to show or hide using the screen options we will leave these as they are and write the css to address the menu items.
    This is the css I added to your Quick CSS:

    
    /*#kontakt1 = menu-item-54 
    #kontakt2 = menu-item-1178 
    #kontakt3 = menu-item-1179 */
    
    @media only screen and (max-width: 767px) { 
    li.menu-item-54,li.menu-item-1178 {
    display:none !important;
    }
    }
    @media only screen and (min-width: 768px) and (max-width: 989px) { 
    li.menu-item-54,li.menu-item-1179 {
    display:none !important;
    }
    }
    @media only screen and (min-width: 989px) {
    li#menu-item-1178,li#menu-item-1179 {
    display:none !important;
    }
    }

    The top 3 lines is just a cheat sheet as to which menu items go with which item number.
    Then there are the 3 media queries covering the 3 sizes you wanted with 2 menu items inside each one, set to “display:none”
    Please note that the mobile menu uses the menu items as classes, where the main menu uses the same menu items as IDs
    which is why some of the rules are “#menu-item-1179” and others are “.menu-item-1179”
    Please clear your browser cache and check.

    I hope this helps.
    Best regards,
    Mike

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.