Color changing Nav toggle in B3

@RME, you have to add this to the .navbar-toggler-icon class. Add the below to the “Add Code” section in the page settings.

You then have to change the color to the desired color

I also tried adding a icon, which replaces the actual icon, but I do not managed to drop the icon on the same place them the hamburger icon.

If someone wants to play with it, you habe to add the following attributes to an icon

Thanks to Webplus I found the solution. Thanks!

Please tell the rest of us!

1 Like

Good idea.

It’s not quite what you were looking for but solved the problem I had as regards white on black background - Color of "Standard Hamburger" Menu Icon - #14 by durbanad.

Sorry! but it did help me.

Here’s a solution I found on Stack Overflow guys. You can just add this code snippet to your page settings. Just be sure to name your nav-toggle bric and use that id# first here (right before ‘.navbar-toggler-icon’)

Here’s the link to the article I found:
( css - How can I change the Bootstrap 4 navbar button icon color? - Stack Overflow )

Here’s the code snippet. (I named the bloc “nav-toggle” so changed it here):

#nav-toggle .navbar-toggler-icon {
background-image: url(“data:image/svg+xml;charset=utf8,%3Csvg viewBox=‘0 0 32 32’ xmlns=‘SVG namespace’%3E%3Cpath stroke=‘#0082C9’ stroke-width=‘3’ stroke-linecap=‘flat’ stroke-miterlimit=‘10’ d=‘M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E”);
margin-right: 25px;
}

Here’s where I change the color: stroke=‘#0082C9

And here’s a preview:

2 Likes

Awesome! Thanks.

1 Like

It’s strange, but when I add this to the page header it ends up showing in the preview. I cannot rename that bloc as nav-toggle because it say it is already in use. This can be seen in the layer tree of the side panel as a locked item.

screenshot_906

1 Like

My second post should work, if you add in the page settings in the code area the following code, or do anyone has an issue with this?

1df409d8c79a23eac52aeaf3dba2afcb4aa85ad8_1_690x189

1 Like

it doesn’t work in my project. the color doesn’t change.

@Flashman, you’ll need to wrap the code in style tags.

It only works in the preview or the browser and not in BlocsApp edit mode. Please try once with a new project. If this still do not works, please send me your project, so I can have a look.

@webplus, Your code looks right, but I had to add the name of my bloc before ‘.navbar-toggler-icon’ for mine to work. That, and I did not have to add the ‘!important’ syntax at the end… Otherwise, we’re both on the same track.

@RME, you might try this:

#nav-toggle .navbar-toggler-icon {
background-image: url(“data:image/svg+xml;charset=utf8,%3Csvg viewBox=‘0 0 32 32’ xmlns=‘http://www.w3.org/2000/svg’><path stroke=’#0082C9’ stroke-width=‘3’ stroke-linecap=‘flat’ stroke-miterlimit=‘10’ d=‘M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E”);
margin-right: 25px;
}

NOTE: Make sure you give an id to the “Nav Toggle” element. I named mine, simply: ‘nav-toggle’.

Also, the 'margin-right:25px; at the end is just something I added to move it left a bit.

@Creative Yes, in general both should work. The important is to make sure that is will be overwritten, independent if the code is placed on top or the bottom of the page. But as long the code is loaded after the Bootstrap Code, it will work without the important, you are right.

1 Like

That looks right. Did it work?

I tried the same and it all looks correct apart from no colour change. I wonder if you could simply upload a project file with nothing but the coloured nav bar?

@Flashman and @RME, here’s the Blocs 3 project with the header portion only… CVM-BLOCS3-TEST.zip (44.6 KB)

2 Likes