Change Offcanvas Menu Icon Color - Question | JoomShaper

Change Offcanvas Menu Icon Color

F

Faculty-in-Charge

Template 1 year ago

Hi,

I would like to change the helix offcanvas menu icon(three bars) color and hover color. https://imgur.com/a/o4wnzu7

I tried the following and none worked! Please guide.

  1. Changing it in /templates/shaper_educon/css/presets/preset3.css

    offcanvas-toggler >i {

    color: #112d32; }

    offcanvas-toggler >i:hover {

    color: #254e58; }

  2. Included the following as custom css in templates styles-layout a.close-offcanvas .burger-icon > span { background-color: red !important;}

0
5 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #157366

Hi,

ad 2) that tip was ONLY for Helix Ultimate templates

ad 1) We never recommended to touch template styles files, so it's better to use Custom CSS area in Template settings.

Helix3 guide: https://www.joomshaper.com/documentation/helix-framework/helix3/custom-css-header-code#how-to-use-custom-css

#offcanvas-toggler > i {color: #111 !important;}


:Hover does not work in Mobile browsers, it works only when mouse is used, not finger.

0
F
Faculty-in-Charge
Accepted Answer
1 year ago #157449

It worked ! Thanks Paul.

One more query! In SP Page Builder, How to create a section inside a section ? I tried this but no luck. https://www.joomshaper.com/forum/question/1153

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #157453

From list of addons you can choose the "Row" addon :) and put inside current Section, then you will get extra one inside.

0
F
Faculty-in-Charge
Accepted Answer
1 year ago #157820

Hi Paul,

In a Page, I am using navigation add on within a section. I used 6 navigation items where the last item is a link to a page and the other 5 items, on click, scroll down to a section in the same page. So I used #Sectionid in Link to scroll down to the respective section in the same page. When I set the Scroll To and set the Scroll offset to 120, the first 5 navigation items are working perfectly fine and is taking up the styles - Normal, hover, active properly. But the navigation item where in the Link, a page has been selected, is not working and on click, it is not redirected to the page.

When I disable the "Scroll To", the navigation item with page link is working properly by redirecting it to the page but only the style - Active is not working for the 5 navigation items ! This looks weird. Please help.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #157826

It was designed to be one mode only, as I remember. Now out of hours so I cannot ask is there any hack.


2nd option: Disable Scroll to and install Smooth Scrolling plugin then you will have both.

0