Im a newbie, working on a wordpress website http:// www.smope.net, i'll love to put the "about us" menu directly under the yellow smile in the logo.
I tried to use google chrome's inspector to locate the css ID and file, but i have not had any success in aligning the nav menu slightly to the right
I'll appreciate your help
Apply the following properties to .main-navigation ul to make it look like this:
You can use margin-left in CSS to define the distance between two objects horizontally.
.main-navigation ul {
list-style: none;
margin-top: 0;
margin-bottom: 0;
margin-left: 230px;
text-align: center;
}
Related
I'm having a confusing time here trying to figure this one out. I know I have to be overlooking something here because I've defined anchor properties several times and they have always worked.
Here is a jsfiddle of exactly what I'm working with (I'm actually working with a test nav that I got from this site from another link that I have altered slightly.)
http://jsfiddle.net/LY3Bm/
#nav li a {
font-size: 32px;
text-decoration: none;
color: white;
display: block;
height: 87px;
}
I'm stumped completely :\ I pulled out my full website that has this very same type syntax in it for defining properties to an anchor tag inside of a li and inside of a nav and...it works fine. What am I overlooking?
Thanks!
Seems like you left some kind of illegal character after #nav li
definition on line 21 which is breaking the CSS. Shows up as a red dot in the fiddle
#nav li {
} *// Some character here
#nav li a {
Best way to understand what I want is to watch this short six second video. Please ignore the font change in the video. http://www.youtube.com/watch?v=7KM78DKoVZU
What's the best way to go about making that rounded rectangle to show up behind the navigation link on hover? On hover, I could have the navigation button's background change to a background image with a rounded rectangle in the image, but before I go about that, I want to ensure there's no cleaner or easier way to go about this.
Thoughts? Thanks!
The rectangle isn't really showing up behind the nav link. What's really happening is the nav link's style is changing during the hover state.
#menu {
list-style: none;
display: inline-block;
background: #eee;
margin: 0;
padding: 0;
}
#menu li {
float: left;
padding: 10px 5px;
margin: 4px;
color: #222;
cursor: pointer;
}
#menu li:hover {
background: #ccc;
border-radius:6px;
}
Check out the jsFiddle for a live example.
http://jsfiddle.net/kGa67/
EDIT- I suppose the cleanest way is style both the ul and li as inline-block instead of floating the the li like I did. Use ems if you have a responsive design but beware that it doesn't always scale perfectly on very small and very large widths.
Check out this fiddle: http://jsfiddle.net/8PqkH/
It's easy to do.
nav a:hover{
background: #902;
color: #fff;
border-radius: .5em;
}
I have spent a while trying to find out how to make text links sit horizontally on a navigation bar, but to no success.I am EXTREMELY new to coding so this is probably extremely easy to do, i am using html and CSS, i have tried just putting them on the same line. Also using:
#nav li a {
color: black;
display: inline;
list-style-type: none;
}
#nav li a {
color: black;
position: relative;
}
i have tried to find the answer on the site but i cant see one, so i thought i might as well just ask people. Thank you for reading.
You are targeting the wrong element, it should be
#nav li {
display: inline;
}
You were selecting a element, you need to target the li, a is an inline element by default, li renders one below the other, so to make them inline, we target li
I would suggest you to use
#nav li {
display: inline-block;
margin-left: -4px; /* If that white space matters to you */
}
As you will get same effect, but with some additional bonus like margins padding to space up your element. Alternatively, you can also use float: left; but you will need to clear your floats so stick with inline-block
At the moment I am building my first responsive site with Twitter Bootstrap and I am running into an issue I can't solve by myself.
I am customizing the media queries, but when it comes to the links inside the navbar I am stuck.
I want .brand to be centered and the navigation links should be centered below - a new line for each link. I managed to center .brand using this CSS code in the appropriate media query:
.brand {
display: block;
width: 100%;
text-align: center;
}
Now for the links. This is the code:
.navbar li a {
display: block;
}
The selector seems right because when I assign a background color, it shows up. But using display: block; does not result in a new row for each link. Using width: 100%; also does not result in the desired form.
My guess is that it has something to do with the li each link is wrapped in.
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Thomas Glaser</a>
<ul class="nav">
<li>Arbeiten</li>
<li>Thomas</li>
<li>Kontakt</li>
</ul>
</div><!-- /.navbar-inner -->
</div>
I tried to fiddle around with the CSS, but using a trial & error method in combination with such large CSS files is not really recommended I guess, that's why I am asking you: What CSS code is needed, to display the links inside the navbar one below the other?
It's actually pretty straightforward, all you need are the following css rules:
.navbar .nav {
width: 100%;
}
.navbar .nav > li {
float: none;
text-align: center;
}
So you were right, it's the li that needs to be styled, not the anchor :)
I´m trying to create a menu with the list 'ul'.
The problem I´m facing is:
The submenu doesn´t appear at the top of its corresponding menu link, but, below.
You can see it at this link:
http://jsfiddle.net/6r6e8/
Thanks.
Try including a top value in your CSS:
ul.menu ul {
top: 0;
}
You could add margin-top: -21px to your ul.menu ul styles as a quick fix.