Joomla Templates Club 406,261 posts

[angie00 Friend angie00Join date: November 2011Posts: 294Downloads:0Uploads:80 Thanked: 10 times in 1 posts]

#731914

Is it possible to have the off-canvas sidebar open up after page loads? Many people still don’t know they can click on the 3 horizontal lines to open the sidebar.

Or are there any other suggestions as to how we might attract attention to this off-canvas option?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#753222

I suppose one thing you could try is adding an eye catching background to the icon.
For example . . . .

Within file path —> /templates/ja_sugite/local/css/themes/school/template.css
at/around line 1025 or so, locate the following CSS rule:


.btn {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-radius: 0;
border-width: 2px;
font-weight: 700;
position: relative;
text-transform: uppercase;
transition: all 0.3s ease-out 0s;
z-index: 1;
}

Modify the “background” property with a different color code – something to catch the eye.
As an example (using the color black) . . .


background: #000000;
border-radius: 0;
border-width: 2px;
font-weight: 700;
position: relative;
text-transform: uppercase;
transition: all 0.3s ease-out 0s;
z-index: 1;
}

Just an idea

[gringo211985 Friend gringo211985Join date: May 2012Posts: 678Downloads:197Uploads:121 Thanks: 77 Thanked: 123 times in 27 posts]

#753250

Hi @angie00,

I would suggest to use the word “menu” next to the 3 horizontal lines, however this will require some php work to achieve.

/templates/ja-sugite/tmpl/blocks/header.php on line 63 add the word “menu” like in example below.

<button class="btn btn-primary off-canvas-toggle " type="button" data-pos="right" data-nav="#t3-off-canvas" data-effect="off-canvas-effect-2"><i class="fa fa-bars"></i>Menu</button>

You will then need to style with css to get the best result.

Hope this helps 🙂

Thanks,
Richard

1 user says Thank You to gringo211985 for this useful post

1. angie00

[Author]

Posts