Search...
FAQs
Subscribe
Pie
FAQs
Recent topics
Flagged topics
Hot topics
Best topics
Search...
Search within HTML Pages with CSS and JavaScript
Search Coderanch
Advance search
Google search
Register / Login
Post Reply
Bookmark Topic
Watch Topic
New Topic
programming forums
Java
Mobile
Certification
Databases
Caching
Books
Engineering
Micro Controllers
OS
Languages
Paradigms
IDEs
Build Tools
Frameworks
Application Servers
Open Source
This Site
Careers
Other
Pie Elite
all forums
this forum made possible by our volunteer staff, including ...
Marshals:
Campbell Ritchie
Tim Cooke
paul wheaton
Jeanne Boyarsky
Ron McLeod
Sheriffs:
Paul Clapham
Liutauras Vilda
Devaka Cooray
Saloon Keepers:
Tim Holloway
Roland Mueller
Bartenders:
Forum:
HTML Pages with CSS and JavaScript
Bootstrap: how to make navbar <li> elements in same line?
Dumidu Udayanga
Greenhorn
Posts: 11
I like...
posted 7 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
I am trying to make navbar elements appear on same line. I tried overriding .nav class display to inline:block. but it is not working at all. Please help me fix this problem
HTML
<head> <title>Samrat Luitel website design </title> </head> <body> <!-- Navigation --> <nav class="navbar navbar-default navbar-fixed-top topnav"> <div class="container-fluid topnav"> <div class="navbar-header"> <a class="navbar-brand topnav" href="#" target="_blank">Samrat Luitel</a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#home" style="color:black">Home</a></li> <li><a href="#home" style="color:black">Home</a></li> <li><a href="#home" style="color:black">Home</a></li> </ul> </div> </div> </div> </nav> </body>
CSS
body{ font-family:"Lato"; font-weight:700; } .navbar-brand{ color:black; }
.nav {
display: inline-block;
}
Mohamed Sanaulla
Bartender
Posts: 3225
34
I like...
posted 7 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
Have you linked to the Bootstrap CSS? Bootstrap CSS should do it for you. Check
http://getbootstrap.com/docs/3.3/components/#navbar
bootstrap documentation
Mohamed Sanaulla |
My Blog
| Author of
Java 9 Cookbook
|
Java 11 Cookbook
I got this tall by not having enough crisco in my diet as a kid. This ad looks like it had plenty of shortening:
We need your help - Coderanch server fundraiser
https://coderanch.com/wiki/782867/Coderanch-server-fundraiser
reply
reply
Bookmark Topic
Watch Topic
New Topic
Boost this thread!
Similar Threads
Need ideas on what looks good?
re-use the same html code in every page
wide navigation bar causes problems
New to JSF, having trouble with JS in JSF
php mysql code not working on server
More...