Joomla Templates Club 406,261 posts

[ibewguy Friend ibewguyJoin date: July 2011Posts: 255Downloads:18Uploads:6 Thanks: 62 Thanked: 9 times in 2 posts]

#694577

Hello,

Is there a way to add a menu label to off-canvas sidebar so that visitors will know to click on the icon?

Thanks!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#694640

Hello
Can u add a screenshot of and illustrate the details inside screenshot so i can see what exactly you are talking , and assist you better in this case.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#750361

Hello
Can u add a screenshot of and illustrate the details inside screenshot so i can see what exactly you are talking , and assist you better in this case.

[ibewguy Friend ibewguyJoin date: July 2011Posts: 255Downloads:18Uploads:6 Thanks: 62 Thanked: 9 times in 2 posts]

#694650

Yes, thank you @pankajsharma

I was able to use an .png image on the off-canvas sidebar menu when I tested it live in Chrome’s developer console , but when I added the image to the bootstrap css it repeated my image. This was the only way I knew how to do it. I know you could generate an HTML label with php, but I do not know php.

I changed the css background tag from background-image: none; to the style below. I cannot find the code that is repeating the three bar menu icon. (I knew it couldn’t be that easy:)

.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: url("/images/SECTIONS.svg");
border: 1px solid rgba(58, 157, 132, 0);
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 2;
border-radius: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

The problem is people will not see the off-canvas menu icon and my not open it!!

I am trying to add the word SECTIONS (see screenshot) next to the three bar off-canvas menu icon so visitors will know to go there!

(the above section on bootstrap.css starts on line 2507)

Thanks!

[ibewguy Friend ibewguyJoin date: July 2011Posts: 255Downloads:18Uploads:6 Thanks: 62 Thanked: 9 times in 2 posts]

#750371

Yes, thank you @pankajsharma

I was able to use an .png image on the off-canvas sidebar menu when I tested it live in Chrome’s developer console , but when I added the image to the bootstrap css it repeated my image. This was the only way I knew how to do it. I know you could generate an HTML label with php, but I do not know php.

I changed the css background tag from background-image: none; to the style below. I cannot find the code that is repeating the three bar menu icon. (I knew it couldn’t be that easy:)

.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: url("/images/SECTIONS.svg");
border: 1px solid rgba(58, 157, 132, 0);
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 2;
border-radius: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

The problem is people will not see the off-canvas menu icon and my not open it!!

I am trying to add the word SECTIONS (see screenshot) next to the three bar off-canvas menu icon so visitors will know to go there!

(the above section on bootstrap.css starts on line 2507)

Thanks!

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#694758

Hi
You need to use no-repeat in style to stop image repeat .
off-canvas icon code is defined in the php file . templatesja_charitytplsblocksheader.php
+ i suggest you to use custom.css file to override the css rather then change in the core files .
Core files are override when u update the template/compile less to css .

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#750392

Hi
You need to use no-repeat in style to stop image repeat .
off-canvas icon code is defined in the php file . templatesja_charitytplsblocksheader.php
+ i suggest you to use custom.css file to override the css rather then change in the core files .
Core files are override when u update the template/compile less to css .

[ibewguy Friend ibewguyJoin date: July 2011Posts: 255Downloads:18Uploads:6 Thanks: 62 Thanked: 9 times in 2 posts]

#694921

Good advice @pankajsharma – I will do that in the future. This customization may be beyond my level of skill at this time

Thanks!

[ibewguy Friend ibewguyJoin date: July 2011Posts: 255Downloads:18Uploads:6 Thanks: 62 Thanked: 9 times in 2 posts]

#750445

Good advice @pankajsharma – I will do that in the future. This customization may be beyond my level of skill at this time

Thanks!

[Author]

Posts