RocketTheme - TOPIC: [SOLVED] A clone mainmenu for the only offcanvas section

Welcome Guest! Login

0 items Join Now

- Riccardo
- Elite Rocketeer
- Posts: 1061
- Thanks: 20
SOLVED A clone mainmenu for the only offcanvas section

Posted 4 years 2 months ago
- I want to have a main menu for the mobile that has different images than the ones in the layout section (default for desktop).
  
  A need that is asked to me for my customers in various templates to improve the comprehensibility of the navigation on the small devices.
  
  I have think to clone (create a copy with alias buttons) for the mainmenu and change on this the buttons images (by use the gantry5 menu editor).
  
  Is this way feasible or are there better solutions?
- Last Edit: 4 years 2 months ago by Riccardo.
- Riccardo Rausch
  www.frontpageserver.it
#1421572
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: SOLVED A clone mainmenu for the only offcanvas section

Posted 4 years 2 months ago
- I'd just swap the images out using custom CSS - it'll be more straightforward.
  
  Regards, Mark.
- The following users have thanked you: Riccardo
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1421573

Riccardo
Elite Rocketeer
Posts: 1061
Thanks: 20

Re: SOLVED A clone mainmenu for the only offcanvas section

Posted 4 years 2 months ago

I try, but can't place the background-image button properly. I created a first test button, as you can see, but cannot replace the image, just overlay it. Can you help me please?

This my code (custom-mobile.scss):

// typically max 47.938 rem
    @include breakpoint(mobile-only) {
        #g-offcanvas #g-mobilemenu-container ul > li.g-menu-item-30:not(.g-menu-item-type-particle):not(.g-menu-item-type-module):link > .g-menu-item-container, 
        #g-offcanvas #g-mobilemenu-container ul > li.g-menu-item-30:not(.g-menu-item-type-particle):not(.g-menu-item-type-module):visited > .g-menu-item-container,
        #g-offcanvas #g-mobilemenu-container ul > li.g-menu-item-30:not(.g-menu-item-type-particle):not(.g-menu-item-type-module):active > .g-menu-item-container, 
        #g-offcanvas #g-mobilemenu-container ul > li.g-menu-item-30:not(.g-menu-item-type-particle):not(.g-menu-item-type-module):hover > .g-menu-item-container {
          background-image: url('gantry-media://icon-regionen-mobile.png');
          background-repeat: no-repeat; 
        }

Last Edit: 4 years 2 months ago by Riccardo.
Riccardo Rausch
www.frontpageserver.it

#1421579

- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: SOLVED A clone mainmenu for the only offcanvas section

Posted 4 years 2 months ago
- ok, I did one for you. That CSS wasn't even close I'm afraid.
  
  Regards, Mark.
- The following users have thanked you: Riccardo
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1421584
- Riccardo
- Elite Rocketeer
- Posts: 1061
- Thanks: 20
Re: SOLVED A clone mainmenu for the only offcanvas section

Posted 4 years 2 months ago
- It's all OK! I thank you very much!
  You have very optimized the mobile style sheet! Now I will continue with the other buttons and their position.
- Riccardo Rausch
  www.frontpageserver.it
#1421586

Time to create page: 0.042 seconds