I know things like this have been asked here before, but the previous answers haven't solved my problem. I need to center the nav bar elements on my page. I've tried text-align: center on the div, nav and a tags, but no luck. I need it to be responsive as well so the nav bar stays centered as the page is resized.
<div>
<nav class="navbar navbar-default">
<a class="blog-nav-item" href="">item</a>
<a class="blog-nav-item" href="">item</a>
<a class="blog-nav-item" href="">item</a>
<a class="blog-nav-item" href="/">item</a>
<a class="blog-nav-item" href="/">item</a>
<a class="blog-nav-item" href="/">item</a>
<a class="blog-nav-item" href="/">item</a>
<a class="blog-nav-item" href="/">item</a>
<a class="blog-nav-item" href="/">item</a>
</nav>
</div>
update: it is slight more centered when I put the div holding the navbar inside my container-fluid and change it to a regular container, but it looks like the text is still not centered in the div. I would also like to keep a container-fluid if I can.
Different browsers renders the HTML elements by their own set of rules.
This is why you want to make sure to tell the browser not to go all anarchistic on you.
The main problems you might encounter are the rules of the text-align function. It does not work on inline-elements, but on inline-block elements.
See this Fiddle and try it out in your browsers.
http://jsfiddle.net/39ppmgdf/
Notice the display:inline-block;
The reason you are experiencing some difficulties here is because of the anchor .
Read the answer of this post to understand more:
What is HTML's <a></a> tag default display type?
Related
I am having trouble with my nav bar, the first link in the nav bar is always to low. There seems to be a hidden <a> tag in it that I can not remove. This wasnt there until I added a link to the logo on the left. When the logo was not a link the first link stayed in the correct position. I have uploaded some of the code to codepen
https://codepen.io/BitRot86/pen/qXgQzE
Any ideas would be helpful
There are two small typo mistakes in your HTML code.
<ul class="nav navbar-nav" id="navLeft">
<li>
#*<a href="index.php"><img src="http://gbcsite.ca/v5/images/GBC-logo.png" class="img-responsive" width="200px"><a />*#
<a href="index.php">
<img src="http://gbcsite.ca/v5/images/GBC-logo.png" class="img-responsive" width="200" />
</a>
</li>
</ul>
First, you've not closed the <img> tag.
Second, you've incorrectly closed <a> tag under image link.
I've fixed it at my end and it is working.
I am trying to do this:
and mine looks like this:
Not the most beautiful thing.
My questions are:
We have a header with logo, search bar, menus and a button. How can i stack them all inline?
On the div with the background image - how can I position the headline like the one in the original site?
1) Have a look at the Navbar component documentation. Items should already be inline if implemented correctly. You can use the navbar-left and navbar-right classes to position items in the navbar.
2) You'll notice the large centre text starts at the same position as the navbar logo. This is because of the container class. I suggest you analyse some examples to see how to correctly implement the container.
After that, if you're still struggling add your styles.css to your pastebin post or better still create a Codepen - this would allow someone to be more helpful.
1- you can write float:left; or float:right; ? look for this float
2-for position an element you must create a relative div later inside create absolute div.. and you can specify settlement coordinates with top right bottom left.. look here position
I would say float is not good practice to use . Unless you really have no choice to use.
But based on how I look at it.
It's achievable using flex.
Put a display:flex on your main div
Then as for your other elements . Use display:flex-grow
It's advantageous using flex. , not only it wil solve your problem. It makes your site responsive.
Cheers
[![if you need all navigation item in one line. you have to make display:inline-block,for navigation.
change your code to:
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 nav-wrap">
<ul class="pull-left"><li></li>
</ul>
<ul class="pull-left">
<li class="formSearch">
<input type="text" placeholder="Find Freelancers" id="searchButton">
</li>
<li>Browse</li>
<li>How it works</li>
</ul>
<ul class="pull-right">
<li>
<a href="#" class="signupHover">
<span class="icon signup"></span>
<a href="#">Sign Up
</a>
</a>
</li>
<li>
<a href="#" class="loginHover">
<span class="icon login"></span>
Login
</a>
</li>
</ul>
<button type="button" id="buttonHeader">Become a freelancer</button>
</div>
/*add below css*/
.nav-wrap ul li{display:inline-block;}][1]][1]
I am having issues with my navigation collapsing into the body of my site and I would prefer it to remain fixed when the browser window is re-sized. I have tried adjusting the min/max-widths of the bootstrapresponsive.css but it still seems to disappear into the body. Any help would be amazing. Cheers! I have posted the code below:
<div class="navbar" style="padding-bottom:0px;">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div id="logo"><img src="images/CoHlogo.jpg" class="logoImage";></div>
<div class="nav-right">
<!--Social Networking-->
<a class="socialNav" href="mailto:info#classroomofhope.org?subject=Website Inquiry"><img src="img/social/mail.png"/></a>
<a class="socialNav" href="http://www.youtube.com/user/Classroomofhope" target="_blank"><img src="img/social/youtube.png"/></a>
<!-- Twitter
<a class="socialNav" href="https://twitter.com" target="_blank"><img src="img/social/twitter.png"/></a> -->
<a class="socialNav" href="https://facebook.com/ClassroomOfHope" target="_blank"><img src="img/social/facebook.png"/></a>
<!--Google plus
<a class="socialNav" href="https://google.com" target="_blank"><img src="img/social/googleplus.png"/></a> -->
<!--Donate Button -->
<img src="img/donate_header.png" class="donateImage";>
</div>
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li class="dropdown" id="about">ABOUT US
<ul class="dropdown-menu">
<li id="values">OUR VALUES</li>
<li id="journey">OUR JOURNEY SO FAR</li>
<li id="founder">MEET THE FOUNDER</li>
</ul>
</li>
<li id="education">WHY EDUCATION?</li>
<li id="projects">PROJECTS</li>
<!--<li id="media">MEDIA CENTER</li>-->
<li id="donate">DONATE</li>
<li id="contact">CONTACT US</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Removal of the class .nav-collapse from one of the <div> elements solves this problem. As the name of the class suggests, an element with this class will become hidden on smaller screen sizes (I think below widths of 979px is what the stylesheet says?), by receiving height:0 and overflow:hidden via media query.
Here's a JSFiddle (with externally-loaded Bootstrap CSS) that demonstrates how layout would appear without this class. Try resizing the Result pane to see how it would look at different screen sizes.
I hope this is what you were looking for! If not, let me know and I'll be happy to help further.
(Edit:) On taking a look at your live environment, I can now see that when you say "collapse", you mean the navigation links break to a new line as the parent element becomes too small. This is standard behaviour for floated elements. To stop this from happening, you can try applying min-width:1200px or something to that effect to the .container element (inside of .navbar-fixed-top). Hope this helps!
I believe my question would be best answered with an example. So here is a JSFiddle.
HTML:
<ul>
<li>
<a href="#">
<img alt="placeholderImg" src="http://placehold.it/82x82">
</a>
</li>
<li>
<a href="#">
<img alt="placeholderImg" src="http://placehold.it/82x82">
</a>
</li>
<li>
<a href="#">
<img alt="placeholderImg" src="http://placehold.it/82x82">
</a>
</li>
</ul>
What I want to do is have my floated list items occupy an exact width of 262px in all major browsers (IE7 and above).
I assume you need to keep li's at a certain width, so that they float left in order to lie next to each other? In that case you need to do away with the scroll overflow because the scrollbar is taking up unwanted space. Your items should lie next to each other now if your math (adding widths and margins together) is done correctly .
http://jsfiddle.net/Diezel23/kGKaV/14/
Imagine I have a navigation bar in my page header, with a number of links. I'd like the links to spread out horizontally to fill the parent ; is there a way to do this using CSS which doesn't rely on me hard-coding based on the number of links? e.g if I add or remove a link I'd like it to still work.
I tried:
<div class="navBar">
<a class="navBtn" href="#" >Home</a>
<a class="navBtn" href="#" >Services</a>
<a class="navBtn" href="#" >About us</a>
<a class="navBtn" href="#" >Blog</a>
<a class="navBtn" href="#" >Contact</a>
</div>
div.navBar
{
text-align:justify;
}
a.navBtn
{
font-style:italic;
}
But this just left-aligns the text. I know I could use a table but just to show I can, I'm trying to do it 'properly'. Or, is this a case where a table is 'proper'?
Text-align: justified;
Another option is to create a table with width: 100% around your nav bar and have each nav item be in a td
you could even set the width, in percentage, of each td