Mobile menu

[PapaBurke]

Good evening,

I have been working on the mobile menu for ForgottenThymeFarm.com.

I would like the menu to open with the drop down arrows being white on a green background, which is what I have.  When you hover over the drop down menu option I would like the arrow to change to green on a white background.  

When I hover over the drop down menu option the arrow turns green on a green background.  If you hover over the drop down arrow then the arrow is green with a white background.

I apologize for all of the color descriptions, but I believe I have two of the three the way I want it.  How do I get the drop down arrow to be green on a white background when you hover over the menu option?

Take care,

Bill

[scrambler]

Are you saying that you want the hover colors (green arrow white BG) to remain while you are hovering the sub menus items?

If you do the answer is below
http://guide.weavertheme.com/menu-mar-advanced-customizations/#xhover

[PapaBurke]

Hi Scramber,

I have something like that for the full screen menu and it is working fine. 

I am trying to get the mobile menu (I believe it’s called hamburger menu) to have a green arrow with a white background when I hover over the menu option. 

Specifically, when I open the mobile menu there is a white arrow on a green background for the Farm Products option.  When I hover over the words ‘Farm Products’ I have a green arrow with a green background.  I would like a white arrow with a green background.

Take care,
Bill

[scrambler]

Sorry, I did not get it was the mobile menu.

The rules below should do the job

.menu-primary .menu-arrows > li.current_page_item .toggle-submenu:after,
 .menu-primary .menu-arrows > li:hover .toggle-submenu:after {color:#789e6b;}
.menu-primary .menu-arrows > li.current_page_item .toggle-submenu,
 .menu-primary .menu-arrows > li:hover .toggle-submenu {background-color:white !important;}

[PapaBurke]

@Scrambler,

We’re close; the hover works well.

When the mobile menu expands the background color for the drop down arrows is a different color or hue.  Is it possible to have it match the rest of the background (#789e6b)?

[PapaBurke]

@Scrambler,

I just noticed an unintentional change in the drop down arrow behavior when using the full web browser.  

If you hover over the drop down menu option both the menu option and drop down arrow change to green with a white background, which is what I want.  When you move the cursor through the drop down menu the main menu option changes back to white letters on a green background (which is what I want), however the arrow remains green on a white background.

I would like the arrow to match the menu option, white on a green background when you scroll through the drop down menu. 

If I comment out the four lines you provided then both menus, full browser and mobile, behave as I would like except for the off-color green background for the arrow when the mobile menu is opened.

Please let me know if it’s possible to make this one change.

Take care,

Bill

[scrambler]

The background of the Arrow I believe is set in Main Options > Menu > Primary Menu Bar > Mobile Open Sub menu Arrow BG
Type transparent in there.

For the second question, I guess I misunderstood what you wanted then.

If you dont want the hover color to remain when you move down the sub menu items, remove the current page selector, use the simplified rules below
.menu-primary .menu-arrows > li:hover .toggle-submenu:after {color:#789e6b;}
.menu-primary .menu-arrows > li:hover .toggle-submenu {background-color:white !important;}

[PapaBurke]

@Scramber,

Thanks, this worked.  I appreciate you bearing with me through the details.  I know it wasn’t easy to understand and it wasn’t easy to describe.

Take care,
Bill

[Author]

Posts