Solved

Change navigation font color on mobile sizes

Posted on 2016-10-10
8
60 Views
Last Modified: 2016-10-14
What do I need to modify so that the navigation on mobile devices has white text where the blue mouse over color is?  Below is the only responsive css code I could find on the css file.
/* Responsive Menu
--------------------------------------------- */

.responsive-menu-icon {
	cursor: pointer;
	display: none;
}

.responsive-menu-icon::before {
	content: "\f333";
	display: block;
	font: normal 20px/1 'dashicons';
	margin: 0 auto;
	padding: 10px;
	text-align: center;
}

Open in new window


Screen Shot
http://screencast.com/t/9OSrr0H2xA2

Beta Site
http://298.6e8.myftpupload.com/
0
Comment
Question by:nsitedesigns
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41837184
I would not modify the theme css file. It may be replaced if the theme is updated. I would instead create a custom css file that is listed below the theme css file. The style that would override the color of the mobile menu text is:
.genesis-nav-menu.responsive-menu .menu-item > a:hover {
    color: #fff;
}

Open in new window

0
 

Author Comment

by:nsitedesigns
ID: 41837200
Yes, sorry, I meant I would use simple custom css plugin.  Your suggestion worked for the main navigation buttons on mobile device but the submenus don't display any change at all.  is there a way to add the blue background with white text to submenus too?  If you want me to create a new question, I will.  Thanks
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41837209
Those items currently have a transparent background color. The selector for the style that targets them is
.genesis-nav-menu.responsive-menu .sub-menu li a, .genesis-nav-menu.responsive-menu .sub-menu li a:hover

Open in new window

0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

Author Comment

by:nsitedesigns
ID: 41837234
Thanks.  I tried adding a background color to the above selector but it didn't appear to take.

.genesis-nav-menu.responsive-menu .sub-menu li a, .genesis-nav-menu.responsive-menu .sub-menu li a:hover {
  background-color:#0088ce;
  color:#fff;}

Open in new window


Any idea what I did wrong?
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41837701
Perhaps I misunderstood. Are the submenus displayed when you click the down arrow at the end of the main menu item? Those items have changed color and background-color.
0
 

Author Comment

by:nsitedesigns
ID: 41838393
I was having a caching issue.  So now, yes, ALL the submenus appear as light blue.  Not really what I was looking for so I will have to see if I can tweak.  Give me a moment.
0
 

Author Comment

by:nsitedesigns
ID: 41838413
Cool - OK got it to work almost perfectly.  Trying now to remove the dark blue hover on current page on sub menus.  Can't seem to find the code to remove that.  It is hard to use Inspect Element to view code because drop down menus go away.
0
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 41839392
You could try this selector:
.education-pro-blue .genesis-nav-menu li.current-menu-item > a

Open in new window

I use Firebug in Firefox. I can lock in a hover state with it.
0

Featured Post

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question