CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
queen
queen

Reputation: 1

Bootstrap custom navbar with images

i tried to make a custom navbar since the standart navbar isnt really what i desire. It looks too casual so i try instead of using for the navbar, images.

I cant get them 4 images to line up in a row.

I saw there are 2 types of making it, once is defining a class through CSS and the other one is directly in the index.html. Are there any difrences in those 2 methodes?

Help would be super appericated. I tried like 30 websites with parts of the code but it seems like nothing is working im wondering what i do wrong.

greeting Queen

.navbar {
max-width:960px;
text-align:center;
}

.home {
position:relative;
display: inline-block;
float:left;
padding:10px;
}

.search {
position:relative;
display: inline-block;
pading:10px;
}
.logo {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
}

.partner {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
<body>
<div class="navbar">
        <div class="navbar-special">
            <ul class="nav">
<li class="home"><a href="#"><img src="http://i.imgur.com/GryNQfZ.png" /></a></li>
<li class="search"><a href="#"><img src="http://i.imgur.com/NfURGQL.png" /></a></li>
<li class="logo"><a href="#"><img src="http://i.imgur.com/sIwbaop.png" /></a></li>
<li class="partner"><a href="#"><img src="http://i.imgur.com/Ry9hIzC.png" /></a></li>
        </div> <!-- div closing navbar -->
    </div><!-- div closing navbar -->
</body>

http://jsfiddle.net/n32koz7q/1/

Upvotes: 0

Views: 96

Answers (2)

Johann
Johann

Reputation: 691

Just add the following code:

.navbar-default {
 background-color:red;
}

This should get you going.

Upvotes: 0

nikk wong
nikk wong

Reputation: 8670

As it applys to styling, there are a few caveats which make putting styles in an index.html or an external stylesheet different.

Putting styles in an external stylesheet will (everything else held constant)...

—create a new HTTP request, and the external style sheet will be loaded after the index.html page (given that this page requests the stylesheet).

—change the order at which styles are applied. For example, if you have.

index.html: 

    <html>
      <head>
       <link rel="stylesheet" type="text/css" href="mystyle.css">
      </head>
    <body>
      hello world!
    </body>
   </html>
   <style>
    .body {color:black;}
   </style>

and mystyle.css:

body {
color: white;
}

the body would have a css property of color:black, since that style was loaded last. You can read about this here.

There are a few other differences, but these are probably the ones that are particular to your current use case.

As for your original question: here is an updated fiddle:

http://jsfiddle.net/n32koz7q/2/

You had a lot of unnecessary styling. I would start here, and then build up. Basically, the most basic CSS that your are going to use to get elements to sit inline, in this case, will look like so: 

.navbar {
max-width:960px;
text-align:center;
}

li {
    display:inline-block;
    padding: 10px;
}

Essentially you just want those li elements to sit inline.

Good luck!

Upvotes: 1

Related Questions