Hamburger Menu and horizontal lines changes

bonoman · January 7, 2019, 6:52pm

How to get the horizontal lines white?

Jakerlund · January 7, 2019, 6:59pm

Hi @bonoman
Click the navbar field and switch Appearance Theme to Dark.
If you want other colors you need the @MDS css approach above.

dark

michaelokraj · February 18, 2019, 12:48pm

H @MDS,

thank you for. your help here. Great support. Do you by chance know, what to add to the code when I am using the “two bar” hamburger instead?

I tried to do the research myself on bootrrap documentations … but can not find any hints …
thank you in advance if you have an answer.

best, michael

KBConcepts · August 8, 2019, 10:59pm

Are there any updates for this since Blocs 3.x?
What is the name of the subClass we use to change the color or the lines?
Are there any other options other then lines and the thickness?

MDS · August 9, 2019, 7:40am

Hi @michaelokraj and @KBConcepts

Looks like I missed a reply here…

@michaelokraj

If you wish to have your hamburger svg with only two lines/bars instead of 3, you need to modify the svg code of the hamburger image.

Original code:

#nav-toggle .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

Replacement code you need to modify d='M4 by d='M31 (provide your view box remains 0 0 30 30:

#nav-toggle .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M31 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
    }

@KBConcepts

As previously mentioned, to modify the svg you need to modify the code (Bootstrap 4) and cannot use a subclass. Blocs 2 was different as it was based on Bootstrap 3 which hamburger was an icon,

Here is an example of the 2-line/bar hamburger:

2 line hamburger.bloc (725.2 KB)

MDS

michaelokraj · August 9, 2019, 12:21pm

thank you @MDS

KBConcepts · August 9, 2019, 5:36pm

Thank you @MDS.
Those lines of code look almost the same. lol
So is the amount of lines the only change that can be done?
What about change the color or the shape… maybe even have icons?

MDS · August 9, 2019, 6:43pm

Hi @KBConcepts

Already replied to you in January this year.

MDS:

Hi @KBConcepts

You can add the following code to page settings:

<style>


#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'%3E%3Cpath stroke='green' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  background-color: black;
}

</style>

Green Hamburger with black BG.bloc (200.7 KB)

MDS

KBConcepts · August 9, 2019, 6:52pm

I do remember you helping me with that.
I recall being sad that Custom Class or subClass could not be used.

What about the shape… maybe even have icons?