Appetite Theme – Menu Aesthetic Changes

tanishqkumar · Member · May 18, 2017 at 12:51 pm
Copy link

Add topic to favorites
Hi,

These questions pertain to my site: http://www.careerfear.org

1. When I hover over the ‘About Us’ title on the home page, it glows dark yellow. I can’t seem to figure out why this is, or how I can change this. This happens with some other elements on my page, too.

2. How do I change CSS so that the dropdown menu on the home page has an underline when someone hovers over it as opposed to a circular/elliptical border? I’d like to be able to control the colour and thickness of underline, too.

3. I’d like the area at the top where the menu links are to be solid white all the time, and then the slideshow to begin underneath those, as opposed to the menu items transparent and then solid when you scroll down.

4. How do I extend the area in the drop down that can be clicked to be taken to the link? Only a small area around the text on the dropdown on the menus on the home page is clickable, I’d like to use the entire area present in the menu dropdown as clickable area even if it’s not on the text itself.

5. This is unrelated to my previous questions. There is a grey border (background) around all my pages, it makes it look as if the site is floating in a grey void. I would like to completely disable/remove this feature so the site looks normal, with no background/border. How/can I do this?

Thank you so much if you’ve read all the way down here!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 18, 2017 at 9:15 pm
Copy link
Hi,

1. When I hover over the ‘About Us’ title on the home page, it glows dark yellow. I can’t seem to figure out why this is, or how I can change this. This happens with some other elements on my page, too.

The following will allow you to change the hover color on all elements that turn that dark yellow.
```
.hentry .entry-header .entry-title a:hover, .hentry .entry-content .more-link-container a:hover, .hentry .entry-summary .more-link-container a:hover {
	color: #cc0000;
}
```
2. How do I change CSS so that the dropdown menu on the home page has an underline when someone hovers over it as opposed to a circular/elliptical border? I’d like to be able to control the colour and thickness of underline, too.

This will change the oval border to a bottom border and allow you to change the color and thickness of the border line.
```
.main-navigation li a {
	border: none;
}
.main-navigation li a:hover {
	border: none;
	border-radius: 0;
	border-bottom: 2px solid #cc0000;
}
```
3. I’d like the area at the top where the menu links are to be solid white all the time, and then the slideshow to begin underneath those, as opposed to the menu items transparent and then solid when you scroll down.

Add this to your custom CSS.
```
#masthead {
	background-color: #fff;
	padding-top: 15px;
	padding-bottom: 15px;
}
#masthead, #masthead a {
	color: #000;
	text-shadow: none;
}
```
4. How do I extend the area in the drop down that can be clicked to be taken to the link? Only a small area around the text on the dropdown on the menus on the home page is clickable, I’d like to use the entire area present in the menu dropdown as clickable area even if it’s not on the text itself.

This is a bit tricky to do and keep the submenus looking clean and very close to what they are now, but give the following a try and see what you think.
```
#page .main-navigation ul ul {
	padding: 0;
}
```
5. This is unrelated to my previous questions. There is a grey border (background) around all my pages, it makes it look as if the site is floating in a grey void. I would like to completely disable/remove this feature so the site looks normal, with no background/border. How/can I do this?
```
.has-custom-background #page {
	margin: 0;
}
```

No items found.