[Pro] Another cool menu

Another cool menu done with @softpress #Freeway7, inspired by @codrops’ Responsive Multi-Level Menu:

http://fwdemo.rvanheukelum.com/stickednavigation/

Another cool menu

Nice - I’ll have a closer look at this one later.

D

Very Cool.

Can you post how you did that

Well, what do we have here …

– Richard

Hi Richard,

I get these mails too. I am a long time Freeway user but have no clue on programming.

The menu you have made is fantastic. Is it possible to buy a copy of this menu with a short information on how to

adjust the design of the hamburger and the colors used - or ask you to adapt this to my designs of hamburgers ( 2 ).

This is one of them - must be transparent as the png.

I guess to change the “click on image” is easy by replacing the image in the Resourses…

Regards from Norway,

Per-Arne Sollien

1. mai 2017 kl. 20:06 skrev “Richard van Heukelum” <[email protected]>:

Well, what do we have here …

– Richard

On 19 May 2017, 10:22 pm, Per-Arne Sollien wrote:

Hi Richard,

I get these mails too. I am a long time Freeway user but have no clue on programming.

Welcome to the club, neither have I :)

The menu you have made is fantastic. Is it possible to buy a copy of this menu with a short information on how to adjust the design of the hamburger and the colors used - or ask you to adapt this to my designs of hamburgers ( 2 ).

No, sorry … I just don’t sell my results of experiments I did with other people’s work. I just give it away. Even when it’s customised for fellow Freeway users :)

This is one of them - must be transparent as the png. I guess to change the “click on image” is easy by replacing the image in the Resourses …

That’s a pretty save bet when you need to change the image for something new (preferably an .svg).

But you really should fiddle around with the stylesheet to locate and change the colorscheme tot whatever your needs are.

– Richard

: )

Very generous of you to share this. Thanks, I will try find the right colorscheme and change it as you advised me to do. I thought the menu item was an image to adjust - not a font icon.

Best regards from Norway

Per-Arne Sollien

1. mai 2017 kl. 23:55 skrev Richard van Heukelum <[email protected]>:

On 19 May 2017, 10:22 pm, Per-Arne Sollien wrote:

Hi Richard,

I get these mails too. I am a long time Freeway user but have no clue on programming.

Welcome to the club, neither have I :)

The menu you have made is fantastic. Is it possible to buy a copy of this menu with a short information on how to adjust the design of the hamburger and the colors used - or ask you to adapt this to my designs of hamburgers ( 2 ).

No, sorry … I just don’t sell my results of experiments I did with other people’s work. I just give it away. Even when it’s customised for fellow Freeway users :)

This is one of them - must be transparent as the png. I guess to change the “click on image” is easy by replacing the image in the Resourses …

That’s a pretty save bet when you need to change the image for something new (preferably an .svg).

But you really should fiddle around with the stylesheet to locate and change the colorscheme tot whatever your needs are.

– Richard

The ‘click to open’ image next to the hamburger (as shown above) is just there to point out to the visitor that ‘the hamburger’ is the (only) navigation option there is at that point. It’s nothing more than just a rather friendly gesture other than letting the visitors find it out for themselves. You could get rid of it of course, but there’s nothing wrong with a heads-up to your clientèle :)

The hamburger is a button item, styled like this:

 .dl-menuwrapper button:after {
     content: '';
     position: absolute;
     width: 68%;
     height: 5px;
     background: #fff;
     top: 10px;
     left: 16%;
     box-shadow: 0 10px 0 #fff, 0 20px 0 #fff;
 }

The ‘height’ here is the height of 1 horizontal bar, the top bar of the hamburger. The middle and bottom bars are both ‘drop shadows’, placed at a distance of 10px and 20px and both coloured ‘white’ to complete the hamburger.

– Richard

Richard, A while ago you posted a cool menu called Stacked Navigation. I downloaded it and have beed playing around and wondered if it’s possible to alter the menu button hamburger? I want to make it custom or add the word menu.

Billy

Hi Billy, do you mean this one?

The hamburger that’s currently used is a css created ‘icon’, not an image or whatever. You can change/remove this if you want, just as long as you apply the same ‘link’ to its replacement … whatever that is.

– Richard

Yes. Where in the js code is this stated?

Billy

So what I’m trying to do is replace the menu-button with a link to an image instead. Just not sure were to place the link and what code to remove in the component.css file

Billy

The button that you see there is constructed with CSS. You’ll need to fiddle with the .menu-button selector, as well as the .menu-button:before and .menu-button:after selectors. The simplest thing to do would be to delete :before and :after selectors, and then put a background-image property on the .menu-button to be the image you want to see.

Walter

On Aug 2, 2017, at 12:26 PM, billy kimmel <[email protected]> wrote:

So what I’m trying to do is replace the menu-button with a link to an image instead. Just not sure were to place the link and what code to remove in the component.css file

Billy