Ugly Hamburger Navigation


Author Message
Tina
Artisteer Team

Posted: 1/2/2014
Quote message 

It's possible to customize navigation under Menu->Levels->Options
 
S

Posted: 1/2/2014
Quote message 

Thank you. That is not what I was asking about.
 
S

Posted: 1/2/2014
Quote message 

Thanks, Nick. What I actually meant was if anyone knew of anything cuter to use than the ugly hamburger. That is IF it is going to be there anyway. I asked this late last night, I suppose I could dig around a little bit and try to find what I'm looking for instead of asking a quick question just prior to going to bed and hoping a response would be there in the am. My bad.
 
jrgweb

Posted: 1/2/2014
Quote message 

@S - I've done this with an image.

example: http://demo.artisteertoday.com/menu_respon_image/

code: .art-menu-btn:hover span {
background: none !important;
}
.art-menu-btn span {
background:transparent !important;
}
.art-menu-btn {
background-image: url('images/joomlaicon.png')!important;
background-size: 100% !important;
background-repeat: no-repeat !important;
}
 
jrgweb

Posted: 7/21/2014
Quote message 

@Senapi - Try this:

.art-menu-btn {
background-image: url('http://www.schoonheidsverzorgingmarlies.be/images/responsivebuttonmarlies.png ')!important;
background-size: 100% !important;
background-repeat: no-repeat !important;
}
 
Cool

Posted: 7/25/2014
Quote message 

Quote S:

Anyone know of an alternative to this when one of these ugly things would normally appear in responsive design?


I like how you use something non standard so people wont know to click it. lol
 
Senapi

Posted: 10/16/2014
Quote message 

@jrgweb

I'm seriously late, but thank you very much for your time and expertise.
One more question about the responsive button. Is it possible to remove the shadow behind the button?

Again thanks in advance

 
jrgweb

Posted: 10/16/2014
Quote message 

.art-menu-btn {box-shadow:none!important;}
 
senapi

Posted: 10/18/2014
Quote message 

@jrgweb

I've been able to do a great job with the responsive buttons, but I want to use them in a flat design.

If you look at www.ovekot.be on a smartphone you'll see the adjusted button (which is great), but I still have a border around it. I would like to lose the border.

I applied the first code you implemented in this thread.(not for schoonheidsverzorgingmarlies)

I understand that the menu button isn't a menu which you can easily adjust.

Again I would be greatful if you could help me out.
 
Me

Posted: 10/18/2014
Quote message 

Is it really smart to use something nonstandard?

Everyone even old people are starting to recognize the hamburger means menu.

If you use something else there is a good chance you'll confuse and lose your visitors.


 
jrgweb

Posted: 10/18/2014
Quote message 

@Me

Looks like senapi is going to use the hamburger menu but without border, shadow and maybe a different background color.

I know @S wanted a different image but I do agree with your comment.
 
ScottN

Posted: 10/19/2014
Quote message 

Quote Me:

Is it really smart to use something nonstandard?
Everyone even old people are starting to recognize the hamburger means menu.
If you use something else there is a good chance you'll confuse and lose your visitors.


Ummm... you might want to see: http://exisweb.net/mobile-menu-abtest

They did a study comparing the use of the Hamburger, Hamburger + the word Menu, the word Menu by itself, and the word Menu with a border, etc.

The winner is... the word Menu with a border around it. In other words, it beats out the Hamburger.

Based on this, I'm moving toward using the word "Menu" as a button. jrgweb has a good post with good CSS here:

http://www.artisteer.com/Default.aspx?post_id=237066&p=forum_post

- Scott

 
jrgweb

Posted: 10/20/2014
Quote message 

@ScottN

Thank you for this information. Have not seen this before.
That said, web design/development aside, I still see the hamburger
menu from the larger companies.

Will be interesting to see if things change down the road.