z4
|
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
|
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
|
|
Prince Muzy
|
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
|
@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
|
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
|
@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
|
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
|
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
|
@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
|
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
|
|
Mike
|
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
|
@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
|
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
|
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.
|
|
Multiser
|
Quote Tanya:
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
didn't work for me even I tried every single different option and combinations my menu bar still always on and not able to see the rest of the site without having to scroll down.
here in case you wanna take a look of it www.elegantbraidingpalace.com
|
|