I have a navbar that looks like this: (See EDIT)
The only HTML is:
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>News
</li>
<li>Games
</li>
<li>Cafe
</li>
</ul>
<!-- END navbar list -->
I want the it not to collapse vertically and stay in a vertical bar on all screen sizes.
Does anybody have any css snippet that can remove the responsiveness?
EDIT2: http://jsfiddle.net/9KMR6/5/ I tried copy pasting some of the styles from bootstrap's non repsonsive example but I have an issue where other elements such as the image in the fiddle overlaps the navbar so the links stop working... Does anbody know why/how to fix?
Using the Bootstrap Customizer, try setting #grid-float-breakpoint to a very low value such as 1px.
Sounds like there's a media query inside the CSS file that automatically collapses the menu beneath a certain screen width.
If you can find the CSS files that apply to your page, try posting them here.
Alright, default bootstrap, eh? Their documentation defines small screens as their default state; all the other media queries scale up.
They also have a section on disabling the responsive behavior. Unfortunately...
As a heads up, the navbar component is rather tricky here in that the styles for displaying it are rather specific and detailed. Overrides to ensure desktop styles display are not as performant or sleek as one would like. Just be aware there may be potential gotchas as you build on top of this example when using the navbar. -getbootstrap.com/examples/non-responsive
I'm officially out of my depth here, sorry. Maybe you can figure something out from their documentation.
Related
I'm trying to create a list of horizontal tabs that can be selected and the tab content has an additional list of tabs (stacked) that shows the content of those tabs next to them.
I created a bootply here so you can see what I mean.
Whenever resizing down to xs sizes the text in the tabs will overflow for the stacked tabs and for tabs with a dropdown the dropdown options will be disproportional to the size of the tab
Haven't really found a decent way to get around it. What's a way to fix this? Thought about doing media queries but not sure that's the best route to go.
In my bootply I was giving the nested nav stacked tabs (in the tab content) section the class of nav-stacked with a class of col-xs-3. This was causing problems for whatever reason at these smaller screen sizes.
Removing the nav-stacked class and leaving it to be just the regular nav nav-pills class worked and correctly shows since each tab is pushed to be stacked anyways due to the small column size. No text overflow.
What about larger screen sizes if you still want them stacked? I just did a hackish solution and set col-xs-3 col-sm-2 col-md-1 so it still forces the tabs to be stacked.
Updated bootply
There's one spot switching from md-sm (I think) could be xs-sm sizes that the tabs display horizontally again. Easily fixed with a media query.
I have a problem adding a dropdown to a Twitter Bootstrap framework. After I have added the dropdown it expands height of the whole topbar and this is what I'm trying to fix.
Page URL is http://locabikes.de/
If you hover the mouse on the "DE" symbol in the upper right corner, the dropdown will show up but the topbar will also change it's vertiacal size covering the navigation bar.
Is there some way to only show other languages to choose without changing the size of a topbar?
This is the code I'm talking about:
<div class="col-sm-12 col-sm-no-pd">
<ul id="lng">
<li>
<span>DE</span>
<ul>
<li>EN</li>
<li>PL</li>
</ul>
</li>
</ul>
<div id="topSocial">
</div>
This is how I want it to look like after hoovering on the current language hyperlink.
Since you are using bootstrap I should suggest changing the markup of ul#lng to the markup given by bootstrap documentation for dropdowns.
http://getbootstrap.com/components/#dropdowns
Dropdown by default works on click but with the following tweak it will also work on hover:
http://www.joostrap.com/support/tutorials-videos/202-how-to-enable-hover-for-nav-dropdowns
Hope this helps you :)
Turned out I only needed to remove
overflow: hidden property from the parent #topbar div and it started working.
My website has a pretty long navigation bar that shows perfectly on a computer browser. However, when I load the website on a tablet or a smaller browser, the navbar turns in 2 rows.
Like this:
Now my question is, is it possible to make the navbar smaller or the text so that the navbar shows as it should? Like this:
http://puu.sh/90e1O.png
I've tried to play a bit with the Viewport, but that didn't helped me much :/ Here is a live preview:
http://website.craftshark.net/mcprofile/
You can get the code by the inspector mode. I do have a gist of the Nav here tho, but it could be incomplete: https://gist.github.com/matthijs110/b7c554f0abd4c38fa3c4
Does someone know how I can fix this?
Try this, it should work http://www.bootply.com/mjEnd2pAem
I don't recommend using this from line 44-46:
<ul class="domain">
<li><h4 id="domain" title="<?php echo $lang['NAV_IP-TOOLIP'] ?>">play.domain.com</h4></li>
</ul>
Because you're wrapping the url with your custom class and the bootstrap menu's css is not affecting this part. You're better off putting it in a and add your custom class to the a instead of ul
EDIT:
Actually, it breaks into 2 line if the resolution is smaller than 993px. Let me see if I can find you another solution
I thinks problem is that you use custom padding-left for div with id=domain, and you wrap link play.domain.com by html tag .
Bootstrap uses css selectors like .navbar-nav>li>a. There is no place for <h4>. Try to use Bootstrap's navbar as it is without customization indentations (paddings, margins) and everything will be work fine.
I am using Twitter bootstrap for my portfolio site. The fluid layout seems to work up to a certain point, but there are a few issues with the home page.
Once I go smaller than about 997px, the nav menu disappears entirely. It almost looks like it drops down below the header bar and is hidden, but I can't seem to get it to show. It should actually switch to the mobile menu and remain in the upper right corner.
Also once you get down to smaller screen sizes, the "About Me" and "Contact" sections of the index page overlap each other. I'm sure this has to do with my structure somehow, but cannot find the problem.
Any bootstrap experts know what might be causing these issues?
Here is a link to the test version of the site. http://theiamzone.com/kyle_hagler/portfolio-site
From the source code I view from the site,
I Found out that you lacked of jquery file.
<script src="//code.jquery.com/jquery-1.10.1.min.js">
Put it and see if the dropdown work.
And for the About Us and Contact Us part.
A method you can try is put container to wrap them all, read from here for more information.
http://twitter.github.io/bootstrap/scaffolding.html#layouts
From my point of view in about us section, try no to wrap the 2 span 6 column,
Use the following code instead.
<div class="row-fluid">
<div class="span12">
<div class="span6"></div>
<div class="span6"></div>
</div>
</div>
Same situation happen on the contact us section,
the css class aren't assigned for them to work.
I a situation I run into often, but my homebrew methods don't stack up to a good solution.
What I'd like to do is to have a menu beside a logo, while being responsive.
It looks like so
=======
logo =
==============Menu=======================
===============================================
The way my html looks is like so
<div id="logo">
<img src=""... />
</div>
<div id="menu">
<ul>...
</ul>
</div>
Now I want to position the menu at the bottom of the logo, but I have no idea how to do it. I can use margins, but than, once the responsiveness kicks in on mobile browsers and then the menu goes under the logo, there will be a large margin there too.
How would I deal with this?
Try to use responsive-design framework such as zurb-foundation it will offer you this requirement easily. Look at this example on its official documentation about Top Bar