I'm trying to play a little bit with CSS of Wordpress. However, I tried so much things but I can't solve it for some reason.
I wanted to have more space between links in the menubar so I added padding. I created to following code:
.main-navigation li {
display: inline-block;
float: none;
list-style-type: none;
padding-right: 30px;
Here the other CSS code
.main-navigation a {
display: block;
text-decoration: none;
color: white;
.main-navigation a:hover {
text-decoration: underline;
}
.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
background-color: black;
}
.main-navigation ul ul a {
background-color: rgba(0, 0, 0, 0.5);
width: 200px;
}
This worked for me and created more space in the menubar however it's also added the padding to the links in the dropdown menu, which shouldn't be done. I have tried to much things but it seems I cannot solve it. Could someone tell me what I could do? Please see below to see what I mean.
Screenshot of the problem
Add this
.main-navigation ul ul li {
padding-right: 0;
}
The CSS declaration that you posted, .main-navigation li {}, is saying "target every <li> that is a descendant of .main-navigation". So your <li> elements that are in the next level of lists also get targeted.
You can use the > child selector to select only direct children of the parent. So the following code should work for you, and not affect the dropdown elements:
.main-navigation > li {
display: inline-block;
float: none;
list-style-type: none;
padding-right: 30px;
}
Related
I have an issue where I want my theme to not do certain things.
I want my theme so stop using a sticky menu.
I want a specific page to not display a header.
I want h2 linked text to not be grey.
The heading changes i've tried through theme options so far apply to all pages instead of just the one i need.
I've dug into the code with file manager on cPanel but have found so many potentials for variables to change due to lack of expertise.
This is what i need help changing
PLEASE HELP!
Below is what i believe controls my whole main menu. What do i need to alter to make it no longer sticky site wide?
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
clear: both;
display: block;
float: left;
width: 100%;
}
.main-navigation ul {
display: none;
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation li {
float: left;
position: relative;
}
.main-navigation a {
display: block;
text-decoration: none;
}
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 100%;
left: -999em;
z-index: 99999;
}
.main-navigation ul ul ul {
left: -999em;
top: 0;
}
.main-navigation ul ul a {
width: 200px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a,
.main-navigation li.focus > a {
}
.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}
.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
left: 100%;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
}
Below is what i believe controls the h2 coloring if it is also a url. I do not know for sure though, thats why im here. If i do block specific h2 HTML color it fails to override the theme.
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px;
}
I Dont know what to look for for the page headers.
I want my theme so stop using a sticky menu.
Usually this is a built in option on most downloaded themes.
Check Appearance -> Customize
If not use your browser inspect to find the class in your header with the position: fixed; and overwrite it in CSS with !important.
I want a specific page to not display a header.
Use your browser inspect to find the page ID calls and then target the header with display:none;.
.page-1 .header{display:none;}
I want h2 linked text to not be grey.
h2{color:red;} if you want to override all H2 colours.
To just target the H2 is a certian div use your browser inspect to find the parent classes.
I am going nuts, what am I missing, something obvious I am sure, to make my nav buttons stack next to each other inline and not on top of each other. When I tried using display: inline they all got real tiny like slivers!
http://awesomenesslabs.com/staging/brenna-resp/
Just change your UL and LI CSS to this:
ul {
list-style: none outside none;
display: block;
}
li {
line-height: 18px;
margin-bottom: 12px;
display: inline-block;
}
#navbar > ul > li {
display: inline-block;
}
You should add a class like this.
#navbar ul li {
display: inline-block;
}
and your work tab hover position should be
.nav-work-button:hover {
background-position: 0 -47px;
}
I have a folder that drops down when you hover over it, however I've placed a 20px margin-top to the drop down so it's not pushed up against the main navigation. I like the spacing however when you move your mouse to go select a sub-item the menu disappears.
How would you adjust the margin of the drop down so that it stays so the user can select an item in it?
> ul {
display: none;
}
&:hover > ul {
display: block;
position:absolute;
text-align: left;
z-index:1000;
background-color:#nav-folder-bg-color;
width:150px;
padding: 10px;
list-style: none;
border-radius:#nav-border-radius;
margin-top:20px;
> li a {
color:black;
font-size: .8em;
text-decoration: none;
}
}
EDIT: Here is the menu I am working on - http://menudemo.squarespace.com/home
Put the margin on the first LI in the sub-menu:
&:hover > ul li:first-child {
margin-top:20px;
}
Needed to add
height:50px;
to .main-navigation ul li
So basically i want to make my menu keep in hover state when their sub menu hovered,
i'd already try like this
but it still won't change as i want, where did i go wrong?
here's my snippet
#topmenu li li:hover a:hover{
color: #000;
text-decoration: none;
background-color: #fff;
text-shadow: 0 0 1px #000;
}
regards,
Not sure why you're hiding your sub menu with left: -999em; rather than display: none;.
Here is an updated jsFiddle: http://jsfiddle.net/JmkaM/1/ that uses display: none; and display: block; to show the sub menu.
What you want to do is display the sub menu when the user hovers a top level li. So you would do that like this li:hover ul. For your specifc CSS modify the following:
#topmenu li ul {
/* left: -999em; remove */
display: none; /* add */
}
/* add the following */
#topmenu li:hover ul {
display: block;
}
If you really need to use left for some reason then do the following:
#topmenu li:hover ul {
left: 0;
}
It will bring your sub menu back from being pushed -999em to the left. Though it might not be placed quite where you want it.
UPDATE 1
This will be the last time I help you. You need to learn that good feedback will help others help you. I understand that you are new but responding to answers with, "doesn't do what I want," does not help us or you.
I'm just guessing here at what you want based on the jsFiddle you linked to in the comments.
Here's the new jsFiddle: http://jsfiddle.net/JmkaM/2/
Below you will see the changes I made, before and after. I only highlighted the properties that I changed for brevity.
Before
#topmenu ul { /* ... */ }
#topmenu li ul {
padding-top: 0px;
padding-bottom: 0px;
}
#topmenu li li:first-child {
margin-top: 14px;
border: 0;
}
AFTER
/* added child selector '>' so only top level navigation
items have a background of red */
#topmenu > ul { }
/* set padding on all sides to 0 */
#topmenu li ul {
padding: 0;
}
/* removed whole rule - #topmenu li li:first-child */
UPDATE 2
Try this:
#topmenu > ul > li:hover {
background-color: white;
}
#topmenu > ul > li:hover > a {
color: black;
}
See this Fiddle :
http://jsfiddle.net/mSNqT/46/
This will be helpful.
I use the following menu:
<ul id="menu">
<li class="subMenu">
<h2><span>menu item</span></h2>
<div>
<p><span>submenu item</span></p>
</div>
</li></ul>
I have the following css:
ul#menu {
float:right;
height:80px;
color: #FFF;
margin: 0;
padding: 0.8em 0em;
}
ul#menu li {
display: inline;
margin: 0.1em 1em;
position: relative;
}
ul#menu h2,ul#menu h3 {
font-size: 1em;
font-weight: bold;
display: inline;
}
ul#menu li a {
text-decoration: none;
}
ul#menu li a:hover {
text-decoration: underline;
}
ul#menu li.subMenu a {
padding: 0 1.2em;
}
ul#menu li.subMenu a:hover {
text-decoration: underline;
}
ul#menu div {
display: none;
}
ul#menu li.subMenu div {
border: 1px solid #fff;
width: 125px;
position: absolute;
top: 2.5em;
left: 30px;
background: #fff;
color: #000;
}
ul#menu li.hovered div {
display: block;
}
ul#menu li.subMenu div a {
text-decoration: none!important;
}
can anybody advise how i can keep menu item hovered when i hover over the submenu item
thank you in advance.
Quick solution in jsFiddle. (See the comments in the CSS to find out what I've changed.)
You are most of the way there already. Replacing the ul#menu li.hovered div selector in your CSS with ul#menu li:hover div is most of the battle; the rest is adjusting the submenu position so that you can actually hover over it without it disappearing. (In the jsFiddle above I've simply used padding instead of offsetting with absolute positioning.)
However, please pay attention to the commenters above! Their observations are entirely correct and germane:
The markup being used is rather heavy and unorthodox. For example, your submenu "items" are paragraphs in a div, but normally I would expect to see just a nested list; also, the spans seem unnecessary, and you don't need the submenu class on the list items when you already have an ID on the parent ul.
Second, they are also correct that there are plenty of great tutorials and examples for this out there, so while rolling your own worthwhile exercise you don't need to do it alone—nor should you! My first introduction was this old A List Apart article, and you can even ignore the whole section about JavaScript/Suckerfix since it's 2011 and most of us are perfectly happy to forget about IE6.
http://www.devinrolsen.com/pure-css-horizontal-menu/
You could use li:hover to keep the contents of the li tag displayed. You could also follow this simple tutorial on creating a pure CSS hover menu.