What's the best way to fix the width and height of left tabs in twitter bootstrap to use it as a fixed size navigation bar? Questions are better illustrated in the code below.
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="nav-header">Questions</li>
<li class=""><a data-toggle="tab" href="#lA">------ Question 1 -------</a></li>
<li class="active"><a data-toggle="tab" href="#lB">------ Question 2 ------</a></li>
</ul>
<div class="tab-content">
<div id="lA" class="tab-pane">
<p>How do I fix the width of this section as to avoid using the --------</p>
</div>
<div id="lB" class="tab-pane active">
<p>Can I fix the height as well?</p>
</div>
</div>
</div>
I'm not really familiar with Bootstrap but as no body else has answered, here goes...
Since the two elements you have highlighted both have IDs, why cant you just give them specific widths / heights?
#1A {
width: 300px;
}
#1B {
height: 30px;
}
As I say, I'm not familiar with Bootstrap so I may be misunderstanding your question but that seems like the simple solution to me.
Related
Background
I am making an interface, where I show items and I use nav pills to display information.
I am using Twitter Bootstrap to achieve the look I want, but my grid layout is not working as intended.
Problem
In my interface, I want the nav-pills to occupy the entire space of the row they are in, but they only occupy the left corner:
<ul class="nav nav-pills row">
<li class="active col-sm-4">
<a>Information</a>
</li>
<li class="col-sm-4">
<a>Facts</a>
</li>
<li class="col-sm-4">
<a>Simillar</a>
</li>
</ul>
I read the documentation, and I believe I am doing everything fine. Here is a Plunker example where you can check the mini example I provided:
https://plnkr.co/edit/E4Fx0x8xmuy6d1TwJe9R?p=preview
Questions
What am I doing wrong?
How can I fix it?
I think "to occupy the entire space of the row they are in" you could use predefined class nav-justified:
<ul class="nav nav-pills nav-justified">
My navbar looks like this:
<div class="navbar-fixed" id="navigation">
<ul id="alert_type_nav_drop_down" class="dropdown-content">
</ul>
<nav>
<div class='nav-wrapper'>
<ul id='nav-mobile' class='left'>
<li><a href='/'><img src='http://vignette2.wikia.nocookie.net/gtawiki/images/9/9a/PlayStation_1_Logo.png/revision/latest?cb=20100130082645' height='25px'></a></li>
<li><a href='/'>Test</a></li>
<li><a href='/'>Another Test</a></li>
<li><a href='/'>Heyyy</a></li>
<li><a href='/'>Whyyy</a></li>
<li><a href='/'>Okkkkkk</a></li>
<li><a href='/'>Los Angeles</a></li>
</ul>
<a class="right black-text valign-wrapper"><img class="circle responsive-img" width=50px
src="http://www.stockvault.net/blog/wp-content/uploads/2013/11/Portrait-8.jpg"></a>
</div>
</nav>
</div>
fiddle: https://fiddle.jshell.net/g3mvhvdk/
The problem is that when the window size is too small, elements wrap around into the body of the page like so:
When it normally looks like this:
What's a good way to fix this problem? Should I make the elements horizontally scrollable?
As per suggestions in the comment, I've added the following:
<div class="navbar-fixed hide-on-med-and-down" id="navigation">
which will hide my nav bar when it resizes to be something small enough, my question is, how do I show the hamburger if the navbar's hidden? Is there a helper "show-on-med-and-down" class? I suppose the bigger question is, is there an elegant way to switch from showing a navbar to showing a hamburger and a sidebar?
.nav-wrapper {
display: flex;
align-items: center;
}
#nav-mobile {
flex: 100;
}
My website has some serious issues when you resize it to the medium and small views. It looks great at full screen and mobile view but has some serious issues in the browser when you shrink it down to medium and below. I've used foundation but also mixed in some non-foundation code that I think is causing some issues, such as the container. I also suspect there is something wrong with the top nav bar, because that looks off at shrunk views as well. There is a lot of code to look at but i will post some snippets here as well as link to the main site so you can look through the full code.
Here is some of the top bar and also I have a container which is not part of the grid which might be throwing things off, as well as a weird header element that I coded some css for and if removed throws it off as well. Basically, my code is a bit of a mess, and I will be cleaning it up best I can once I figure out what is causing a lot of this mess up when the browser is resized. (ps. to see the rest of the code and css, please visit www.omegadesignla.com and inspect element, or ask me to paste a specific part, thanks! )
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<span><img class="logo" src="img/primarylogo.png"><span>
</li>
<li class="toggle-topbar menu-icon">
Menu
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>About us</li>
<li>Contact us</li>
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Print Media</li>
<li>Web Development</li>
<li>Promotional Items</li>
<!-- <li class="active">Active link in dropdown</li> -->
</ul>
</li>
</ul>
</section>
</nav>
<div class="container">
<header>
<div class="row">
<div class="large-3 medium-3 small-6 small-centered columns"> <!-- large centered -->
<a id="topbutton" href="#" class="button large radius button">Take the tour!</a>
</div>
</header>
From debugging your site with firebug i see that the logo in the left top corner is a png with 720px width. Although you have class .logo width: 40% it makes the .title-area 720px width which breaks the layout.
try following additions to css:
.title-area {
max-width: 40%; //or whatever you need for your layout. px will work there, too
}
.title-area .logo {
width: 100%;
height: auto;
}
I'd also rewize the png to the needed size to save some kB to download.
I hope that helps.
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'm starting with Bootstrap and have a small problem with the navbar-element. I need to declare a container with the width of 1024px and have to add two navbars. On at the top and the other one below it. Both navbars need a distance from the right div of 0px.
(Stackoverflow doesn't want to let me post pictures, but I think it's much more easier if you can see what I mean: http://www.abload.de/img/asdjraik.png)
As you can see the first navbar is working correctly, but now I need another one below it. Padding from the container under it should be exactly 5px.
My problem is, that the other navbar gains the same padding from the top as the first navbar. I can't get it below the other one. When I define the following classes for this problem another one comes up:
.small-margin {
margin-top: 20px;
}
.big-margin {
margin-top: 110px;
}
My HTML looks like this:
<div class="navbar small-margin">
<div class="navbar-inner">
<div class="pull-right">
<ul class="nav">
<li>link 1</li>
<li>link 2</li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<div class="navbar big-margin">
<div class="navbar-inner">
<div class="pull-right">
<ul class="nav">
<li>another link 1</li>
<li>another link 2</li>
</ul>
</div>
</div>
</div>
The second navbar appears on the left side of the first navbar and not below it. I tried a lot of CSS-fixes.
Anyone have a idea how to get the 2nd navbar below the first?
Thanks in advance!
I've tried your code and it's works
I also tried adding it into 1024px container
.container{
max-width: 1024px;
}
this is the result
Your css code must be conflicted with the bootstrap. maybe you could try wrapping each navbar with .row. I believe that this solution is surely make all navbar separated.
<div class="row-fluid">
<div class="span12">
... navbar 1 ...
</div>
</div>
<div class="row-fluid">
<div class="span12">
... navbar 2 ...
</div>
</div>