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;
}
Related
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;
}
I am having some problems with my CSS external style sheet. I am trying to make a unordered list into navigation bar. I am attempting to do this by adding multiple styles to my navbar div but none of the changes are having any effect on the page when they are inside the navbar div.
#navbar{
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
}
Thanks in advance
You can't nest them like that, try this:
The space between tags/identifiers means the right option is inside the left.
#navbar ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#navbar ul li {
display: inline;
}
The syntax you're currently using is only valid if you're using the Sass/SCSS preprocessor. While Sass is super-awesome, you'd probably be better off using vanilla CSS for now to build a solid CSS foundation. But whenever you want to get some exposure to Sass, check out their docs here: http://sass-lang.com/guide.
In the meantime, this should work for you:
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#navbar li {
display: inline;
}
Here Is the link of the page on which I am working.
In the CONSULTANT section there is a list. I want to make the bullets size smaller.
I have done CSS:
.career ul li span {
font-size: 18px;
}
.career ul li{
font-size: 10px !important;
}
Please help me to make bullets size smaller.
Thanks
There is no <!DOCTYPE html> in your HTML page. so that you're not able to decrease Bullet size
#trainoasis is right, decreasing the font-fize for li works. Tried with ChromeDeveloper tools, but this CSS should do the trick.
.career ul li {
font-size: 0.5em;
}
You can use :before to create your own bullet and have it's own font-size
.career ul li {
list-style: none;
}
.career ul li:before {
content: '■';
vertical-align: middle;
display: inline-block;
margin-top: -3px;
font-size: 12px;
margin-right: 4px;
}
Fiddle
To reduce the size of bullet list, we can use before pseudo element.
For the list we have to give
ul{
list-style: none;
}
And then using pseudo element, we can create bullet as per our needed size and content
ul li:before {
content: ".";
position: absolute;
}
You can style the positions by giving top,bottom,left, right values.
If you have any queries please check,
http://frontendsupport.blogspot.com/2018/05/reduce-bullet-size-in-list.html
Code was taken from the above site.
I have a strange trouble with css.
Take a look at the first element of the menù (Home) of this site (is a beta): http://nightly.gamempire.it/
I want to remove the "Home" word from the first element (and leave only the house icon).
I tried removing the word, but it break the style of the element.
If I set to the property
body > nav a.master { width: 30px; overflow: hidden; }
it break the style of all the menù.
What can I do?
Thanks
body > nav li {
display: inline-block;
vertical-align: middle;
}
body > nav a.master {
display: block;
height: 36px;
font-size: 0;
padding: 0;
}
Another option would be to do this:
nav li:first-child a {text-indent: -9999px;}
or also
nav li a.master {text-indent: -9999px;}
I'm in the process of making my own blog, I haven't got a domain yet so it's not live(I've been building the site from a folder with different directories as the pages). I've been working on the blog and I was looking for a simple navigation menu. I found one on the internet. I'm trying to center the navigation bar and I've tried many solutions that worked for other peoples websites but it isn't working for mine. This is the code (I've tweaked it to my own colors and nav titles)
<ul id="list-nav">
<li>Home</li>
<li>Books</li>
<li>About</li>
<li>Contact</li>
</ul>
And this is the CSS:
ul.list-nav {
list-style:none;
width:525px;
margin-right: auto;
margin-left: auto;
}
ul#list-nav li {
display:inline;
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:150px;
background:#383838;
color:#eee;
float:left;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
"Help me Obi Wan Kenobi your my only hope!"
Your first CSS selector is looking for a ul with a class of list-nav, not an id of list-nav. Change your first CSS rule to:
ul#list-nav {
padding: 0;
margin: 0;
list-style: none;
width: 525px;
margin: 0 auto;
}
And your navigation bar is magically centered. Please see this jsFiddle for a working demonstration > http://jsfiddle.net/TLaN5/. Obviously you'll need to amend the width of the parent ul in order to accomodate the correct width of the elements within, but you should get the idea.
I would wrap the entire page inside <div class="wrap">. You have declared margin twice in the code, so I would remove the first occurrence and leave it like:
ul#list-nav {
padding: 0;
list-style: none;
width: 725px; //NOTE I have increased the width value.
margin: 0 auto;
}
Also, find
ul {
display: inline;
text-decoration: none;
color: black;}
[around line 20] and remove display: inline; rule. This should fix your issues. Check the live example here.
You can give a define size to the ul and center its content (remove the display-inline, indeed)
ul {
width: 960px;
margin: 0 auto;
text-align: center;
}
Then display the child li elements as inline blocks :
ul li {
display: inline-block;
}
The inline-block property won't work in ie7, so check your browser targets first...
Another way is to just use the good ol'
ul li {
float: left;
}
ul:after {
display: block;
content: "";
clear: both;
}
But the li won't be centered within the ul and you'll have to use javascript if you absolutely want to do this dynamically (without assigning a fixed with to each li).