0
Welcome Guest! Login
0 items Join Now

SOLVED Can I customize off-canvas menu?

Last Post
Search Topic

  • SOLVED Can I customize off-canvas menu?

    Posted 10 years 10 months ago
    • Hi,

      I really like the off-canvas menu in my template (Anacron),. Yet I'd like te add a little customization:

      - add a "Close" button at the top of the menu (as seen in some templates from other developers),
      - add the word "Menu" to the toggle element (gf-menu-toggle) as it seems that not all end users recognize the hamburger menu icon as a link to the menu.

      Is this possible and if so, where do I start? Or maybe you could add it to the templates as an option?

      Kind regards, Frits
    #1110729
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Can I customize off-canvas menu?

    Posted 10 years 10 months ago
    • Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.

      Regards, Mark.
    • 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.
    #1110733

  • Re: SOLVED Can I customize off-canvas menu?

    Posted 10 years 10 months ago
    • Hi Mark,

      Thanks for repying so quickly.

      The site is still in development stage at this url: skc3.oorzaak-develop.nl

      If you need Joomla login or ftp details I can put them in the secure area.

      By the way, I just managed to put the word "Menu" in the toggle element by using the css ::before selector. However, for me this method does not provide enough control, like putting the word floating horizontally to the left of the icon bars (or maybe this is due to a lack of css knowledge...).

      Kind regards,
      Frits


      EDIT: now we're at it... the toggle element has an absolute position. As you can see, I tried to center it. In my opinion the result is a bit crude. Normally I would use margin-left and margin-right:auto for centering but that seems not to work in this situation. Do you have any suggestions on that?
    • Last Edit: 10 years 10 months ago by Frits Jongbloets.
    #1110738
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Can I customize off-canvas menu?

    Posted 10 years 10 months ago
    • So for the menu toggle change your CSS from this:
      .gf-menu-toggle:before {
    color: #f26522;
    content: "Menu ";
    line-height: 1.8em;
}
.gf-menu-toggle {
    border-radius: 0;
    height: 40px;
    left: 43%;
    top: 0;
    width: 40px;
}

      to this:
      .gf-menu-toggle:before {
    color: #f26522;
    content: "Menu ";
    line-height: 1.0em;
    position: absolute;
}
.gf-menu-toggle {
    border-radius: 0;
    height: 20px;
    left: 43%;
    top: 0;
    width: 60px;
}
.gf-menu-toggle .icon-bar {
    margin-left: 40px;
}

      For the "close" this infact already exists (kind of) in that you should click on the menu toggle again to close the sidepanel menu. Hoever, because you've moved the menu toggle from the left to the middle, when you open the sidepanel the toggle moves off the screen to the right. So my advice would be to put it back where it was, otherwise you are going to have to start hacking the javascript for the menu to be able to do it.

      Regards, Mark.

      Regards, Mark.
    • 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.
    #1110746

  • Re: SOLVED Can I customize off-canvas menu?

    Posted 10 years 10 months ago
    • Hi Mark, thanks for the css and for your advice.

      I always get a little bit frustrated when technical details put limitations on the design, but I think this time I should listen to your advice and swap the positions of the menu toggle and the logo.


      Kind regards, Frits
    #1110747
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Can I customize off-canvas menu?

    Posted 10 years 10 months ago
    • I understand yes, but that is kind of the point about using a template isn't it? That is, that a lot of the hard work has been done for you but you have to accept that you'll have to trade-off some flexibility in your design for that advantage.

      Also, it is fairly common practice to put that a menu toggle in the top left, you might think your design is better (and it may well be) but you also have to consider where your users might expect to find things in your ui (especially for mobile phones).


      Regards, Mark.
    • 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.
    #1110750

  • Re: SOLVED Can I customize off-canvas menu?

    Posted 10 years 10 months ago
    • MrT wrote:
      I understand yes, but that is kind of the point about using a template isn't it? That is, that a lot of the hard work has been done for you but you have to accept that you'll have to trade-off some flexibility in your design for that advantage.

      True. I used to make my own Joomla templates from scratch but with all responsive things going on and so, I couldn't keep up. So I started looking for reliable ready-made solutions by developers like you guys - and I suppose I'll stick to RocketTheme for some time now. But sometimes I have this drive to change things, beyond the margins that are there - and which are reasonably wide with RocketTheme.

      Kind regards,

      Frits
    #1110752

Time to create page: 0.068 seconds