When I hover over a page name on my horizontal navigational menu the relative sub-pages float below.
At the moment these are showing centered, how can I align these so they align left (in line with the navigational menu title name).
You can see this by going to
http://79.170.44.145/sweetfe2.co.uk/
Hovering over "Business Services" see that menu that drop downs? I'd like that to align left so page links such as 'Practice Studios Oxford' will have both sentences floating left directly down below 'Business Services'.
Many thanks,
Sam
Use 'text-align:leftto.sub-menu` to align the text to left
.sub-menu{
text-align:left;
width: 176px;
}
add margin-left to align the sub menu with the main menu item
.menu > li > ul{
margin-left:12px;
}
Why not add to your CSS:
.sub-menu{
text-align:left;
}
You may also want to add padding-left:12px to align the sub menu items 'better'.
Do you mean:
text-align: left;
in /wp-content/themes/designfolio-pro/style.css?ver=3.8.1
nav ul ul {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
display: none;
float: left;
left: -1px;
list-style: none outside none;
margin: 0;
position: absolute;
text-align: left;
top: 30px;
width: 150px;
z-index: 89;
}
Related
I'm trying to create navigation menu in which last element is on the right side. When I use
float: right
That element is slightly lower that other elements of the navigation menu. Why is that and how can I fix it?
Here is my css:
nav ul{
padding: 0;
list-style: none;
}
nav ul li{
display: inline;
padding: 5px 1em;
}
nav ul li:last-child{
float: right;
}
And link to JSFiddle: https://jsfiddle.net/sLqnm8r5/
Your elements would align correctly if you added a float:left; to your first elements.
checkout Fiddle
I created a navbar and I can't figure out how to get the padding areas of the link to be clickable just like the link.
I have the padding configured in this part of my CSS..
.spectator_nav li {
position: relative;
float: left;
list-style-type: none;
padding: 25px 20px;
}
I created a fiddle. Mine doesn't look like this, but it is enough to show the hover effect and how the padding areas of the link are not clickable to go to the link.
How can I make the padding areas clickable to go to the link?
https://jsfiddle.net/mykx37n9/
You just need to add the padding to the link within the <li>
try:
.spectator_nav li {
position: relative;
float: left;
list-style-type: none;
}
.spectator_nav li a{
padding: 25px 20px;
}
I've spent hours going through a lot of code online trying to center this dropdown menu, but no luck. I feel like I've changed everything in my code twice and I'm at the end of this particular rope.
As you can see, there's space between the right side of the dropdown list and the unordered list that contains it.
I also can't get any transitions to work with the dropdown, so if you feel like sharing some information about that as well it would be appreciated.
Here's the trouble-maker.
<li class="nav">PORTFOLIO
<ul id="portfolio_menu">
<li>PAINTINGS</li>
<li>DRAWINGS</li>
<li>CARTOONS</li>
</ul>
</li><!--portfolio-->
JSFiddle
There is margin right in your list because you have it in your css. Remove the margin-right:4px;. As I can see the text was center. Please explain it more.
ul#navbar_ul li{ width: 125px;
text-align: center;
display: inline;
float: right;
margin-right: 4px; /*REMOVE THIS*/
position: relative;
}
In your code the following code will target all the li elemnts. If you want to apply only first level of child then use >. This will resolve your space issue.
ul#navbar_ul li {
width: 125px;
text-align: center;
display: inline;
float: right;
margin-right: 4px;
position: relative;
}
Change it to like below.
ul#navbar_ul > li {
width: 125px;
text-align: center;
display: inline;
float: right;
margin-right: 4px;
position: relative;
}
DEMO
I've been trying to fix this for an hour now and can't find a solution.
What I want is a centered list with background image as "ticks".
I want this:
Works as it should except the dots are aligned to the left of the list ul (1140px wide) and not the left of the list item li which is centered.
You can use the css :before pseudo-class:
ul {
list-style: none;
text-align: center;
}
li:before {
content: "\2022";
}
http://jsfiddle.net/e6y9d/
If you want the dots to be aligned to the left of ul, Use dot image as background:
ul li {
text-align: center;
background: url(path/to/dot.png) 0 center no-repeat;
}
JSBin Demo #1
Update
If you need the dots to be aligned to the left of list items, use the following:
ul {
list-style-type: none;
padding: 0;
text-align: center;
white-space: pre-line;
}
ul li {
display: inline-block;
padding-left: 15px;
background: url(path/to/dot.png) 0 center no-repeat;
}
JSBin Demo #2
I'm working on this site: http://www.bedriftsdesign.no and got two things I'm struggling with:
First the floating social icons on the left in the header won't allign vertically. I'm using display:block and a bit unsure what I'm doing wrong?
Secondly (optional) I'd prefer them to be on the background element just outside the wrapper, but unsure how to make that work?
Any suggestion on how to solve this would be really welcome.
Thanks
Ans of Question 1 just remove float:left;from here #social li its working as per your requirement :- see the attached image
CSS
#social li {
display: block;
list-style-type: none;
}
Ans of Question 2
I think you are looking this :-
CSS
#social {
background: none repeat scroll 0 0 transparent;
left: 177px;
margin: 0;
padding: 0;
position: fixed;
width: 100%;
z-index: 12;
}
You are floating the list elements li and trying to undo it by setting display: block for the containing anchors a.
You shouldn't set li to be float: left; in the first place.
Find this rule
#social li { float: left; list-style-type: none; display:block; }
and remove float:left; This will align the icons vertically.
In order to align them along the header image, I would use negative margin. Find this rule:
#social{ background: transparent; margin: 0; }
and change the margin to margin: -35px;
Not sure what you mean by align them vertically. To what do you want them to align?
If you want them from up to down change:
#social li { float: none; }