Change the mobile menu button?


Author Message
z4

Posted: 2/6/2014
Quote message 

Hello everyone!
I'm pretty new, but at the same time im pretty comfortable with the software.

I love the new "responsive design" button. Lovely!

However, when the website is shown in "mobile mode" the menu becomes a black button with 3 lines in it. Of course, i understand that's the menu, however, our customers doesnt always get it. I launched a website with this mode yesterday and I already had 2 responses saying "the menu is gone when i go in on the website from my phone".

Yes, we do have a lot of "internet for beginners"-costumers, and also alot of old people at this company. I would like to know if I can change that black button into becoming, well maybe the same button, but with the text "Menu" or something in it aswell?

I'm not very good at HTML/CSS/PHP, so I have a hard time figuring it out. Is there any function for this in artisteer that I simply can't find?

Thanks for reading, hope someone can help me
z4
 
Tanya
Artisteer Team

Posted: 2/6/2014
Quote message 

Hi,

You can switch off this button under the Menu -> Levels -> Options -> Responsive menu button. So the menu will be shown as the full menu without collapsing to the button.

Best regards,
Tanya
 
jrgweb

Posted: 2/7/2014
Quote message 

@z4 - Or try this:
http://www.artisteer.com/?post_id=235428&p=forum_post
 
Prince Muzy

Posted: 6/7/2014
Quote message 

Actually i want to collapse the menu to just a button on the responsive layout. My responsive layout lists all the menu items and it occupies the whole page on mobile devices. I can't seem to find any option to hide or show the button on responsive layout in artisteer menu options. The button happens randomly. Some of my templates shows buttons while some lists the menu awkwardly. I use artisteer 4.1. I need help on how to collapse the menu.
 
Elvira
Artisteer Team

Posted: 6/10/2014
Quote message 

@z4 - you can also try adding the code like the following to the end of your .css file:
.responsive .art-nav .art-menu-btn {
content: "Menu";
}

.art-nav .art-menu-btn {
background: linear-gradient(to bottom, #D8CACA 0px, #CCC0C0 100%) transparent !important;
font-size: 10px;
padding-left: 1px !important;
margin-right: 20px !important;
width: 25px !important;
}

It will replace the menu button with 3 lines with the button called "Menu".

@Prince Muzy, try to go to Menu tab >> Levels >> Options >> Responsive Levels >> and change "All Open" to "Expand on Click".
 
Robert Lowly

Posted: 6/10/2014
Quote message 

Hi Elvira, and thanks for the great code, but i admit there is something i may be missing... you put content: "Menu"... in the code... i tried using that, and i could style the button, but i didn't see any text next to it with the word "Menu"... did i do something wrong?

Thanks...
 
jrgweb

Posted: 6/10/2014
Quote message 

@Robert Lowly - If I may make a suggestion, try something like this:

.art-menu-btn:before
{
position: absolute;
content: "Menu";
bottom: 0;
color: #FFFFFF;
left: 14%;
font-size: 9px;
}
.art-nav .art-menu-btn {
height: 30px;
}

You can style it as you wish.

You can use Elvira's code like this:

.responsive .art-nav .art-menu-btn:before {
content: "Menu";
}

.art-nav .art-menu-btn {
background: linear-gradient(to bottom, #D8CACA 0px, #CCC0C0 100%) transparent !important;
font-size: 10px;
padding-left: 1px !important;
margin-right: 20px !important;
width: 25px !important;
}
 
jrgweb

Posted: 7/3/2014
Quote message 

@Prince Muzy - It seems that Elvira and I misunderstood you.
You need to verify the following.

Go to - menu /levels /options /responsive menu button



http://demo.artisteertoday.com/imagedemo/responsive_button2.jpg


Make sure the responsive menu button is selected.

If the responsive button is already active but does not display, then I would think you have some sort of jquery conflict or some type of corrupt file.
If you can provide a url for Elvira and myself, we can take a quick look at the code.
If you can't provide a url, contact artisteer support here: http://www.artisteer.com/?p=support

or email me at jrgweb [@] gmail.com
 
Sanne

Posted: 10/14/2014
Quote message 

Hi!
I used the code above too. But i woundering is it possible to change to a drop down meny button theire you can write inside Navigation....like Kajsa web have on her mobile site:

www.kajsasweb.se

Anyone knows if this is possible in artisteer and how i write that in css?

Take care!

/Sanne
 
ScottN

Posted: 10/14/2014
Quote message 

Thanks jrgweb for that code. I am using it to add the word "Menu" under the responsive menu icon (the thing that looks like 3 horizontal lines). I realize that is supposed to be widely recognized as the symbol for "menu" but still, I'd really like to just put the word "Menu" there as a button. Anyone have any tips on how to replace the default = icon with a simple button that says "Menu" ?
 
jrgweb

Posted: 10/17/2014
Quote message 

@ScottN
Try something like this:

.art-menu-btn span {
background:none!important;
}
.art-menu-btn:before
{
position: absolute;
content: "Menu";
top: 8px;
color:#FFFFFF;
left: 0;
}
.art-menu-btn {
width: 25px!important;
}

 
ScottN

Posted: 10/17/2014
Quote message 

THANKS @jrgweb!!! That is awesome!!!!

I found the word "Menu" to be too small for the mobile devices I tested on, so I made a few tweaks, but this got me there. Again, many thanks!!!

- Scott
 
Frank

Posted: 11/24/2014
Quote message 

Hi ScottN,

you'd like to let us know about your tweaks?
 
Mike

Posted: 12/18/2014
Quote message 

This needs fixed ASAP in the next version. The current mobile menu aka responsive menu is only geek friendly. It needs to have the first menu item showing in the drop down or something that says "Menu"


 
jrgweb

Posted: 12/18/2014
Quote message 

@Mike

You can easily change the color and place text "Navigation" on the button.

http://demos.jrgweb.net/responsive_nav/

.art-menu-btn:before
{
position: absolute;
content: "Navigation";
top: 7px;
color: black;
left: 2px;
}
.art-menu-btn span {
background:none !important;
}
.art-menu-btn:hover span {
background:none !important;
}
.art-menu-btn {
width: 56px !important;
background:red!important;
}

additional tweaks if needed.
 
Mike

Posted: 12/20/2015
Quote message 

I know this is a old thread but im trying artisteer.

I want to change the hamburger icon and add menu tekst of another color. I dont know where to put the code.

I dont use joomla of whatever but exported it to normale website.

So i do have alle the file and i have played with the code in the style.responsive.css but no luck.

Maybe somebody can explain where to put the code? in wich part of the css so i have a menu text or button with different color.

Thanks
 
Richard

Posted: 9/22/2016
Quote message 

Hello all,

I was wondering if anyone can point me in the right direction?

I am trying to use a Artisteer Web template I created on Weebly site.
For some reason the menu dis-appears when l go live but works in preview mode in Artisteer.