Home Forums Weaver Xtreme Theme Is it possible to add a container to the mobile menu?

Topic Resolution: Resolved

This topic contains 14 replies, has 2 voices, and was last updated by  floridante 1 week, 6 days ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #54884

    floridante
    Participant

    Hello,

    on our site the Hamburger icon is on the right of the menu bar, and we’d like to have some text on the left of the menu bar. I see there’s a possibility to add text to the Hambuger icon, which we probably could use for our purpose, and it’s probably also possible to align the text left and the Hamburger icon right and make them span the whole width of the menu bar, but I’d much prefer to insert an additional text container into the wvrx-menu-container. Is that possible by any chance?

    As always, thanks in advance!

    #54888

    scrambler
    Moderator

    Always include a link to the site for good measure.

    That said, using HTML like below in the Mobile Menu  hamburger Label  HTML box should do what you want

    <div style="float:left;"> Your left content</div>
    <div style="float:right;margin-right:20px;"><span class="genericon genericon-menu"></span></div>

    and add the rule below to the theme Global custom CSS Rule box
    .menu-primary .menu-toggle-button {width:100%;}

    #54902

    floridante
    Participant

    Thank you, Scrambler, I was hoping we could avoid that as it would make the text and the whole menu bar together with the hamburger icon a link to open the menu. The text should link to elsewhere, that’s why I wondered about a possibility to add an additional text container. But thanks anyway, I really appreciate your help and learn a lot from reading your answers and suggestions here on the forum.

    #54904

    scrambler
    Moderator

    @floridante

    Then you can use the Menu Left HTML box to do that (main options > menus > primary menu > Left HTML)

    To have that content only appear on mobile, you can use the hide option below the HTML box

    Then once in place, we can use CSS to fine tune layout

    #54937

    floridante
    Participant

    Thanks again! The theme offers so many possibilities that again and again I’m overlooking features I’d already noticed before. Worked fine and looks as I had in mind!

    I’m still struggling with the styling of the mobile menu though, in particular to adjust your tutorial to distribute the mobile menu items on two columns to three columns. Our menu has 9 rather short items, so I think that would make sense and save space, but so far I tried in vain.

    And I’ve even more difficulties to get the arrows for the sub-menus as close to the corresponding menu entries as they are in destop view.

    But it’s probably better to start a new topic, right?

    #54938

    scrambler
    Moderator

    The rules to make 3 columns on tablet, and two on phones would be

    @media screen and (max-width:581px) {
    ul.sm.wvrx-menu > li, ul.wvrx-menu > li {float:left !important;width:50%;}
    ul.sm.wvrx-menu > li:nth-of-type(2n+1), ul.wvrx-menu > li:nth-of-type(2n+1) {clear:both;}
    ul.sm.wvrx-menu > li:nth-of-type(2), ul.wvrx-menu > li:nth-of-type(2) {margin-top:0.5em;}
    }
    @media screen and (min-width:581px) and (max-width:767px) {
    ul.sm.wvrx-menu > li, ul.wvrx-menu > li {float:left !important;width:33.33%;}
    ul.sm.wvrx-menu > li:nth-of-type(3n+1), ul.wvrx-menu > li:nth-of-type(3n+1) {clear:both;}
    ul.sm.wvrx-menu > li:nth-of-type(3), ul.wvrx-menu > li:nth-of-type(3) {margin-top:0.5em;}
    }

     

    #54939

    scrambler
    Moderator

    For the arrows, if you means you want them right after the menu text, use the rule below

    .menu-arrows .toggle-submenu {position:relative;top:-10px;}

     

    #54940

    floridante
    Participant

    Thank you! Perfect!

    I don’t want to bother you with yet another question, but I tried in vain to achieve the same for the submenus. Since their width depends on their parents width, the columns’ content completely overlapped – as I should of course have expected.

    The only way I’ve found to unbound the submenus from their parent’s width was to set their width to 100vw, but that led me nowhere regarding columns for the submenus – and only worked to some extent for the menu’s last column, while for the second column it should have been not more than 66vw…

    Ideally the submenus would span the whole width of the wvrx-menu-container and allow me to set up 2 or 3 columns, depending on the screen width, but also on the number of menu-items: one submenu has only 2, the other 15 menu-items, so I thought about finding a way to address the menu-items seperately (probably by their number?) to display their submenu either in 2 or in 3 columns. Is that possible or basically wishful thinking and way too complicated?

    I admittedly feel a bit lost in css after a week or so delving into the theme’s possibilities and would be grateful if you pointed me into the right direction – if in case there is one!

    And since you’ve reminded me to include a link to the page → here

    #54941

    scrambler
    Moderator

    This is indeed a bit more complicated because the CSS will have to address each column separately

    The added rules in yellow below added to the @media rules would expand the sub menu to full width and position it properly (shift left) for each of the two/three columns
    Also as you are not using the smart menu, we can simplify the existing rules

    @media screen and (max-width:581px) {
    ul.wvrx-menu > li {float:left !important;width:50%;}
    ul.wvrx-menu > li:nth-of-type(2n+1) {clear:both;}
    ul.wvrx-menu > li:nth-of-type(2) {margin-top:0.5em;}
    ul.wvrx-menu.menu-arrows > li.is-open-submenu:nth-of-type(2n+1) > ul {width:200%;}
    ul.wvrx-menu.menu-arrows > li.is-open-submenu:nth-of-type(2n+2) > ul {width:200%;left:-100%;}
    }

    @media screen and (min-width:581px) and (max-width:767px) {
    ul.wvrx-menu > li {float:left !important;width:33.33%;}
    ul.wvrx-menu > li:nth-of-type(3n+1) {clear:both;}
    ul.wvrx-menu > li:nth-of-type(3) {margin-top:0.5em;}
    ul.wvrx-menu.menu-arrows > li.is-open-submenu:nth-of-type(3n+1) > ul {width:300%;}
    ul.wvrx-menu.menu-arrows > li.is-open-submenu:nth-of-type(3n+2) > ul {width:300%;left:-100%;}
    ul.wvrx-menu.menu-arrows > li.is-open-submenu:nth-of-type(3n+3) > ul {width:300%;left:-200%;}
    }
    I will look into making columns when I have some time later today

    #54942

    floridante
    Participant

    “200% -100%” and “300% -200% -100%” is totally comprehensible, but I’d never guessed “li.is-open-submenu:nth-of-type(n+1)” and all in all I’ve no idea how this is actually working to unbound the submenu’s width from its parent’s width – but this way it’s probably even more fun to see it work all of a sudden!

    Great fun! And very impressive! Thanks a lot!

    #54944

    scrambler
    Moderator

    the nth of type is to target column one two or three. In column one all we need is make the sub menu 3 times as large, in column 2 we also need to shit it one column left, and in columns three we shift it 2 columns left.

    The selectors you can identify using your browser developer tools

    So it is not unbounding the sub menu from the menu, just expanding it and shifting it left.

    Will check sub menu columns later 🙂

    #54948

    scrambler
    Moderator

    The rules to make the sub menu on three columns would be

    ul.wvrx-menu.menu-arrows > li.is-open-submenu > ul > li {float:left !important;width:33.33%;white-space:normal;}
    ul.wvrx-menu.menu-arrows > li.is-open-submenu > ul > li:nth-of-type(3n+1) {clear:both;}

    The ones to make two columns would be
    ul.wvrx-menu.menu-arrows > li.is-open-submenu > ul > li {float:left !important;width:50%;white-space:normal;}
    ul.wvrx-menu.menu-arrows > li.is-open-submenu > ul > li:nth-of-type(2n+1) {clear:both;}

    Add them in the existing @media rules depending what you need on tablet and or phones

    #54949

    floridante
    Participant

    You know, I really tried hard to identify the correct selectors with my browser’s developer tools, and failed nevertheless. 😉

    Thank you very much for the additional rules to make columns! Much appreciated!

    I’m thinking it might be best to clean up the submenus a bit by shorten the long exhibition titles for mobile devices in order to avoid line breaks , i.e. make “anziehendes & angewandtes” just “anziehendes” on mobile devices.

    In another thread you advised me to use the show_if / hide_if shortcode. I figure the code would work in the navigation label field of the menu editor, but that makes it quite busy and slightly confusing in there, and I can’t think of another place to use it.

    Could I create another menu item, name it with the shorter title and use css-classes to swap long and short navigation labels via css depending on screen size?

    Or would you advise to create an alternative primary menu altogether and swap primary menus for mobile devices (via functions.php I guess)?

    #54951

    scrambler
    Moderator

    If you need different menu items on mobile, then either do what you said with the show_if shortcode in the menu label box, or you can use the Primary on desktop, and the secondary on mobile (using the hide option on each), and use a different WordPress custom menu for  each.

    You will need to use the option to move the secondary menu to the bottom so it ends up in the right place.

    #54956

    floridante
    Participant

    Ah, the secondary menu! Another of those features I tend to forget about! Thanks for the advice, it’s perfectly suitable for our needs!

    And in general, thank you for your support! I’ve learned a lot! We decided to group the archive with its list of exhibitions for the mobile submenu according to years (pleasently short labels!) which left us with two items where we needed a further submenu for months. With your step-by-step explanation I managed  to organize these in columns of different width without affecting the parent submenu. Great fun to be able to do so!

    I noticed your link to Apne Aap. Will visit their website tonight and follow your suggestion. Thanks for this as well.

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

You must be logged in to reply to this topic.