The theme I am working with allows for a description (entered in menu description) under the main menu items. I was able to align the main nav items center without a problem, but I'm trying to align the descriptions under to match with no luck. Because the items all have different character lengths this isn't something I am able to solve with padding adjustments.
Here is the navigation: http://screencast.com/t/F7h1Sp0tk
The CSS exists in two areas, but I will happily pastebin both in full if or anything else needed.
Thank you very much.
Description:
span.descmenu {
font-size:12px;
color:#989797;
padding: 0.85em 40px 0.7em 25px;
Main nav:
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display:block;
width:80px;
padding:4px 15px;
text-decoration: none;
line-height: 10px;
outline: none;
text-align:center;
font-size: 12px;
color:#7c7c7c;
Have you tried margin:auto 0; or text-align:center; for span.descmenu?
Related
I'm learning CSS and I'm trying to copycat a simple nav bar from this website.
I want a black background to appear when hovering over an item so I did this:
nav a:hover {
background: black;
}
but the background is only covering the text. I want to it to cover the entire element like in the original site.
And here's the anchor tags CSS if you need it:
nav a {
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
font-weight: bold;
font-size: 16px;
color: white;
float: left;
padding-right: 2em;
margin-top: 1.5em;
}
I coded the same as on your example website, hope it helps: http://jsfiddle.net/yL7yj4xL/1/ (You have to remove padding-right and replace it for just padding)
I'm assuming you have the nav elements in a <ul><li></li></ul> structure.
in that case, change the nav a:hover to nav li:hover
EDIT:
Made this fiddle off of your pen: https://jsfiddle.net/djgsgqp5/
Your nav ul and li elements were getting no height. If you hover on those elements in the devtools youl see they only have a width.
The style in the fiddle is much more stable hopefully does what you need.
Hope that helps!
My Dropdown-Menu Background only appears when hovering over the Dropdown sites, but I want it to appear all the time.
My Site is: http://bellezza-ribelle.blogspot.de/
There are Dropdowns on "Meine Bücher", "Rezensionen" and "Challenges" but the background only shows on the first Dropdown-Tabs, which makes it difficult the read the other ones, if you don't hover over them.
How can I make the Background appear on the drop-down-tabs with only hovering over die "Main"-Tabs (Meine Bücher, etc.)?
Add this to your CSS:
#nav1 ul ul li {
background-color: #f3f3f3;
}
You can also have more "air" by using padding for the li:
#nav1 ul ul li {
background-color: #f3f3f3;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
}
Looks like you might have a little issue with your max-height # .tabs-inner .widget ul on Line 255. Maybe setup a different max-height on :hover?
I'm trying to style my wordpress sub-menu with CSS to show only when a user hovers the "Color" menu item but I haven't succeed so I need some help please.
Here's how my menu looks like at this state:
The sub-menu shows all the time and there is a weird space after the "Color" menu item. Also, the sub-menu items are displayed one after another and not one below other like a drop-down menu should be.
Could you please help me out?
I'm aware that there are some similar questions to this one but they were of no help.
EDIT: added current CSS menu code that I have in my style.css
nav.main { float: left; }
nav.main li { float: left; margin-right: 11px; }
nav.main li.last-child { margin-right: 0; }
nav.main li a {
color: #7A0018;
display: block;
font-size: 13px;
padding: 50px 7px 22px 7px;
text-decoration: none;
}
nav.main li a:hover { background: #fbf6dc; }
nav.main li.current-menu-item a { background: #fbf6dc; }
where is css for your child list items ? you haven't use display property for those sub-menu which should be done none first then only on hovering them you have to change display property 'block'.
You have given margin-right property 11px; where as ul on default also occupies some margin.
Can you also provide your html frame (code)?
While working on a responsive design, I noticed that everything is responsive except for my unordered list. When I resize the browser, the list doesn't move or stay centered in its DIV. I've tried a bunch of things all day but simply can't figure it out. For context, #sitecontent is the container holding everything, #sitecontent .leftsidebar contains an image and the unordered list, and #sitecontent .leftsidebar ul is the unordered list. Can someone check it out and tell me what's wrong? Please visit my site at http://www.tommaxwell.me and view the source.
Try this CSS:
#sitecontent .leftsidebar ul {
position: relative;
top: -5px;
list-style-type: none;
font-family: 'Patua One', cursive;
padding-left: 10px;
}
#sitecontent .leftsidebar ul li {
margin-bottom: 3%;
clear: both;
border-bottom: 1px solid #E5E5E5;
font-family: helvetica;
text-align: center;
}
My browser is adding some padding to the list, which is a pretty common thing for browsers to do. You might consider using a reset (meyer, yui), or just setting explicit padding/margin on the ul and li's.
I guess I was overcomplicating the whole thing, and in the process forgetting the whole point of responsive designs in the first place. Adding padding/margin around the list is absolutely acceptable to use in the case, as I'll use media queries at breakpoints. Don't know why I was making things so complicated in my head!
Hi update your css with mine actually i have given the horizontal padding to your .leftsidebar ul parent div and made some changes in its list-items and its working fine now.. see the attached image for your reference :-
CSS for till IPad
#sitecontent .leftsidebar ul {
padding: 0 25%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#sitecontent .leftsidebar ul li {
border-bottom: 1px solid #E5E5E5;
display: block;
font-family: helvetica;
line-height: 25px;
margin: 2px;
}
And for iphone you will have to write the css :-
image reference for iphone :-
CSS for till IPhone
#sitecontent .leftsidebar ul {
margin-top: 10%;
margin-bottom:20%;
position: relative;
}
What css styles to be applied to make the clickable area of button to the exact shape of the button.Could you please tell me
If you use HTML you have to use a somewhat obsolete technique - Image maps - to get a clickable area that's not in the shape of a square. If you use Flash, you have more options. This reply addresses HTML/XHTML up to version 4, I haven't read the the specs for HTML 5 wich may have more ways of solving this (probably in combination with Javascript).
If I wish to style links in a menu I use an unordered list. You need to use display:block to make the whole list item click-able. I have included example css and html below.
In my stylesheet:
#menu {
width: 800px;
height: 40px;
}
#menu ul {
list-style-type: none;
margin:0;
padding:0;
}
#menu li {
display: inline;
margin-right: 10px;
float: left;
background-color: #FC0;
}
#menu a {
text-decoration: none;
font-size: 1.2em;
color: #006;
display:block;
padding: 5px 10px 5px 10px;
}
#menu a:hover,
#menu a:active {
color: #009;
background-color: #F90;
}
In my html:
<div id="menu">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Articles</li>
</ul>
</div>
This will give you a horizontal menu of three yellow boxes/buttons which will change to orange on hover. The a is displayed as a block and so the hover affect takes affect when the mouse hovers anywhere within the yellow box, rather than just over the text.
Hope this helps :o)