ASIDE menu configuration

Hi,
How do I enter text with the aside-click menu?
I would like to stay as the template PHOTO where there is a part of the menu with the icon and next has written MENU.
How to do it?
I searched the forum, documents and found nothing on setting up this type of menu ...
I'm using the template Writer.
I think it was here that I saw, but I can not find ...
Had a template showing an arrow indicating where was the menu ...
Because I believe that this type of menu will be difficult for some people and would like them to see where the menu is!
The icon is known to those who navigate on mobile phones, but for many people it will be difficult to locate the menu.
So I would POINTING where the menu is.
Looking forward, regards,
Marcia

I'm having problem to understand what you need exactly. You would like to replace dots that animates to bars and put "MENU" text into its place, or just add the text beside the icon?

I just add the text beside the icon - Same as Photo template.
But in the template Photo menu is horizontal and the template Writer aside the menu is vertical.
I am sending attachments to see what you want.
Thanks, regards,
Marcia

Could you please post an url to your site?

Good afternoon.
I did not send any url, because the site is in production on localhost.
I need to insert the text MENU with the menu icon in the menu aside, same as Picture I created (attached - aside I NEED).
Thanks,
Marcia

You can consider changing the slogan location to where the button is.

OR

Create a ':before' on the DIV where the button is. If you need the orientation rotated, you will need to use the Transform in CSS to rotate it 90 degrees.

Where and how I do it?
What is the tag I put the before?
In that file?
Thanks.

I just quickly did it on the site I am working on for you now to show you, so the code will be slightly different depending on your sidebar size. I have changed the original template a lot.

If you want to rotate the MENU text 90 degrees from how I did it, use CSS with the Transform: rotate. Do a google search on how to use it, but the slogan uses this CSS coding so you can use that to see.

Using the BEFORE on that tag will also make it clickable since its part of the same block

Capture_menu_button.JPG

Good night.
I published the site now and although I was able to put the menu next to the icon in the menu - aside -.
By minimizing the screen for viewing in tablet or mobile icon and the menu are over the logo.
How to solve this?
http://www.joiasetc.com.br/index.php/contato
Thank you,
Marcia

I dont really see an issue to what you said. But due to the sizes changing when you are in smaller windows, you will need to adjust the positioning for different view sizes.

Just change the pixels and play around.

Could you please create a screenshots on how should it look like on different screen sizes?

Please help to accomplish the same as - http://www.joiasetc.com.br/index.php/contato

My site url: http://www.zingeli.com/toets101/

I only inserted this code into the menu.css file.

Code: Select all

#gk-menu-button:before {
background: none repeat scroll 0 0 #663300;
color: #fff;
content: "Menu"
left: 8.5px;
padding: 3px 8px;
position: absolute;
text-transform: uppercase;
top: -190%;
transform: rotate(-90deg);
}

Should I be doing something additional?

Thank you!

@Firebride - please move that code to override.css and enable its use in template settings - advanced section.

@Firebride - please move that code to override.css and enable its use in template settings - advanced section.

Thanks for the reply - I have done so, but no MENU text visible?

I have cut and paste the code from menu.css to override.co.za.

Then enabled the "CSS override" in the template config, advanced settings...

Your thoughts?

http://www.zingeli.com/toets101/

You are missing one semicolon in your override.css code:

Code: Select all

#gk-menu-button:before {
background: none repeat scroll 0 0 #663300;
color: #fff;
content: "Menu";
left: 8.5px;
padding: 3px 8px;
position: absolute;
text-transform: uppercase;
top: -190%;
transform: rotate(-90deg);
}


It works thank you!
http://www.zingeli.com/toets101/

Is there anything else I can help you with regarding this topic?

Is there anything else I can help you with regarding this topic?

Nope, that's it...if my client is happy then I'm happy

If you will have any other questions (not relative to this thread), feel free to post new forum threads

I have just learned that in Mobile (Iphone or small screen view) this MENU displays horizontal and thus partially hidden.

It does not look good.

Can this MENU either be rotated vertically like in desktop view or removed only in small screen view?

http://www.zingeli.com/

Thanks!

Please add this code to override.css:

Code: Select all

@media (max-width: 640px) {
   #gk-menu-button:before {
      left: -10px;
   }
}


It pushes the "menu" info to the left on devices below 640px of screen width.

Big thanks it works!

That with the "Menu" lettering I find really great!
But I found something that (example: iPhone 6) at Smartphone preserve the text not written scorching right, but is represented horizontally!
Can this be changed, it is shown in the desktop version?

Thanks in advance

menu1a.jpg

menu2a.jpg

So basically you would like to have it horizontally on mobile and vertically on desktop?

I want to have both vertical as in the desktop version!

Could you please post an url to your site?

The site is still local (PC) and will run later on intranet!

The same happens when Firebride on its Website: http://www.zingeli.com

Since it looks the same!

Actually sample site always shows menu vertically.

The main issue I see here is placing that long word vertically would simply require either to make sidebar wider or text really, really small - those making it hard to read.