Trouble with Inline Display

annascherman · Member · Dec 17, 2015 at 5:12 pm
Copy link

Add topic to favorites
Hi,

I am using the Blask theme and have customized it so that the main navigation is located on a sidebar. I would like there to be a black background that appears when the mouse hovers over any of the main categories, as I have set up currently…

The trouble is something with the following CSS:
```
.main-navigation a:hover {
	background-color: black;
	display: inline;
	color: white;
	width: 58%;
}
```
When I add, “display: inline;” a weird jumping starts happening with the mouse that isn’t apparent otherwise. Additionally, this display attribute isn’t working with the first title, “Architecure.” I can’t figure out why any of this is happening…is there a way to add padding around the text (so the black background appears larger around each word).

Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 17, 2015 at 9:57 pm
Copy link
Hi, add this to the bottom of your custom CSS. it seems to fix the issue.
```
.main-navigation a {
    display: inline;
}
```
annascherman · Member · Dec 17, 2015 at 10:14 pm
Copy link
Ah, that does fix the problem! The only issue is that it seems to prevent me from being able to control the width of my sidebar and so some of the text is taking up more than one line…

Is it possible to use the inline attribute and still make the width of the sidebar larger?
thesacredpath · Member · Dec 18, 2015 at 4:54 am
Copy link
The width of your sidebar should be set here:
```
.main-navigation {
    width: 220px;
}
```
annascherman · Member · Dec 18, 2015 at 4:58 am
Copy link
That did it!! Thank you!!

Lastly, do you know why the “inline” attribute is not working for the first item in the menu? Also, is it possible to add some “padding” to the text (make the black background extend beyond the text on either side an equal amount)
thesacredpath · Member · Dec 18, 2015 at 5:51 am
Copy link
For the padding on the menu items, find the .main-navigation a rule in your CSS and on the padding declaration, the second number is the left/right padding. Change that 0 to perhaps 5px.

On the Architecture menu item, which has children, they have set a right padding of 49px. Add the following and then match whatever you do on the above in the left and right padding.
```
.main-navigation li.menu-item-has-children > a {
    padding-right: 5px;
    padding-left: 5px;
}
```
annascherman · Member · Dec 18, 2015 at 3:09 pm
Copy link
Awesome! All fixed – thank you! :)
thesacredpath · Member · Dec 18, 2015 at 6:05 pm
Copy link
You are welcome.

No items found.