Customizing Vantage mobile menu?

I think u use CustomCSS, don’t you?

I think that could help you. Here is a class of the part for the text in the menu:

.mobile-nav-frame ul li a.link

For changing the size, font-family, color, etc… of text(example):

.mobile-nav-frame ul li a.link {
font-size: 20px;
font-family: helvetica;
color: #00bcff; 

If that doesn’t work, try to delet the “a.link” at the end of the class”. Sry if this isn’t the solution. Its 00:08 in Germany :D
I think the color of the highlight on mobile phones is the same as the color of a link, but I can’t help you there because I don’t have Vantage Premium… yet. ;)

Hi Jonathon,

First let me help you with number 2.
You can eliminate the “menu” text IN the menu with the following code:

.mobile-nav-frame .title h3 {
display: none;
}

Eliminate the “menu” next to the icon with that:

body.responsive header#masthead.masthead-logo-in-menu .main-navigation .menu-mobilenav-container ul li a {
font-size: 0px;
}

To scale the icon bigger use this:

.mobile-nav-icon:before {
font-size: 20px;
}

For 20px use your own size.

Now, let’s come to your first question:
Your question contains alot of directions, so I don’t know if I understood your question right ;D

So, I will bring up some solutions for things i could think what you want to have:

If you want to have the “menu”-symbol (the one in the right corner of the header) in the other side, try:

body.responsive header#masthead.masthead-logo-in-menu .main-navigation .menu-mobilenav-container ul li {
float: left;
}

…

After I wrote the thing above, I finally understood your first question. You want to have the animation (slide-in) to come in from the right side, don’t you?

I found the piece of code by clicking (with the Dev Tool) on the complete div (name of this DIV is

.mobile-nav-frame[/close]. If you then press the menu button on your site you see this: 
[code]
display: block;
height: 4238px;
width: 360px;
right: 0px;

with activated menu, and this:

display: none;
height: 4238px;
width: 360px;
right: 360px;

with closed menu.

I can’t say how to change that. All i find out by now is that you can change the “right” to “left” but will automatically be resetted to “right”. And also you can say

display: none !important;

, but that would cause that the menu won’t appear. That’s all I know at the moment to your first question.

I will try to find a solution in about 4hours, after I had breakfast. Its 3:15AM at the moment.

And thanks for your compliment :) To answer your last question: I’m from the Black Forest (Baden-Württemberg) and a.t.m. I’m 16 years old :)

Hope I can help you :)

PS: Your site looks great and interesting :)
Good job!

Hi Jonathon,
to come along your first question again:

I now know where the animatione comes from. It comes from the div-container:

.mobile-nav-frame[code].

I don't know how to edit it (tried to set [code]right: 0px !important;

but that will not work. At least it will not work in Dev Tools for me.
You could go and search after the DIV (

class="mobile-nav-frame"

and there you find that (in the same DIV)

style="display: none; height: 3398px; width: 963px; right: 0px;"

. You can change the

right: 0px;

to

right: 0px !important

.
This will display a menu that blops out of the nothing. So there is no smooth animation from side, just the menu that appears. And also, the menu-animation will be calculated btw. the animation will be there, but invisible for your visitors.

PS: I found something on the big picture in the top. There are some “half”-arrows from meta-slider i think. (I use Chrome Version 39.0.2171.95 m (64-bit) ).

If you want these to not be there you can delete the tick of the box “Arrows” (by me “Preilfe”) and save that.