Font Color for Sub Menu Items on Mobile Devices

This topic has 11 replies, 2 voices, and was last updated 7 years, 4 months ago by Wes.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
November 15, 2016 at 10:03 pm #19981
ArtistClara
Customer
Hi,

I’m looking for where to control the font color for sub-menu items on my navigation bar. Currently, the font color is white on a white background so the sub-menu doesn’t show.

Thanks.
November 16, 2016 at 11:08 pm #19990
Wes
Moderator
What is your website again?

The code that handles the color should look like this –
```
.genesis-nav-menu .sub-menu a:hover,
.genesis-nav-menu .sub-menu li.current-menu-item > a {
	background-color: #fa5738;
	color: #fff;
}
```
November 16, 2016 at 11:10 pm #19991
ArtistClara
Customer
Thanks Wes,
The website is claranartey.com
November 17, 2016 at 8:09 pm #19997
ArtistClara
Customer
Wes,

The background color in the code you posted above, which is the same code I have, is red. But I don’t get a red background for my submenus on mobile devices. Also when I changed the font color from white to black it didn’t change anything.

Thanks for helping me with this.
November 19, 2016 at 2:31 pm #20000
Wes
Moderator
Thanks for the link. Now that I can see the original background was changed/removed, you’ll need to make the font color Black (or whatever color you prefer) so that it will show up on the white background on mobile devices.

You can do this by changing #fff to #333 on line 2846 in your CSS –
```
	.site-header .genesis-nav-menu.responsive-menu .current-menu-item > a,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu li a,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu li a:hover,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu,
	.site-header .genesis-nav-menu.responsive-menu > .menu-item-has-children:before,
	.site-header .genesis-nav-menu.responsive-menu > li:hover > a,
	.site-header .genesis-nav-menu.responsive-menu a:hover {
		color: #fff;
	}
```
November 19, 2016 at 11:21 pm #20008
ArtistClara
Customer
Thanks, Wes. That solved it.

I have a question about the header and logo. When I upload a header and a logo image at the same time, the header image disappears. The dimension of the logo I’m using is 200 by 44px and the header is 1900 x 300px. I’m only able to have one of them at a time, not both.

Do you why that is? Thanks.
November 20, 2016 at 9:43 am #20018
Wes
Moderator
Are you trying to add a background image for your header while including a separate Logo? If so, I’d upload the logo like normal, and then add the Background Image for the Header by customizing the CSS. Do you already have the link to the header background image (the large version)?
November 21, 2016 at 1:48 am #20020
ArtistClara
Customer
Yes, I did add the logo and then the header image with CSS but when I do that the header image disappears.

WhenI tried to hide the logo so that I’ll just use the background image, that didn’t work either because it hides both the logo and the header.

Here’s a link to the header image and to the logo .
November 22, 2016 at 12:21 pm #20034
Wes
Moderator
Ok, go ahead and install the logo, and then I can show you how to get the background image to appear in the CSS. But first, I’ll need to know how the background image is supposed to look in the background of the header. Is it supposed to cover the entire section of the header by repeating itself? Or is it only supposed to show up at the bottom?

The image itself has a lot of white space at the top of it, so when you add it into the header, the white space shows up with the colorful part of the image showing up at the bottom.
November 22, 2016 at 1:42 pm #20035
ArtistClara
Customer
I uploaded the title image and the header image is no longer there.

What I want with the header image is a thin border separating the header/menu area from the lower part of the page. Since I didn’t know how to make the border stay at the bottom, I put white space on top so the border remains on the bottom.
November 22, 2016 at 1:55 pm #20036
ArtistClara
Customer
Also, I notice the bottom of the title/logo image is not aligned with the bottom of the nav bar.
November 23, 2016 at 12:17 pm #20038
Wes
Moderator
I don’t think you can add 2 background images to the same div/header so that’s why one goes away when you add the other. The image with the higher priority will always override the other image. You could try experimenting with border-image to see if that will work for you – http://www.w3schools.com/cssreF/css3_pr_border-image.asp

In order to align your logo with the nav you would need to either adjust the size of the logo itself, or increase the height of the Header….or adjust the padding in the nav on the right (line 1289) –
```
.genesis-nav-menu a {
	color: #fff;
	display: block;
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 2px;
	padding: 30px 15px;
	text-transform: uppercase;
}
```
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.