I don't understand enough from Bootstrap.
How do I use Bootstrap to only show the mobile view (the three lines) at every resolution on my website?
The easiest way would be to go to http://getbootstrap.com/customize/#grid-system and change the value of #grid-float-breakpoint to #screen-lg or to a very large pixel value (ex. 9000px). Then download the updated bootstrap file with the "Compile and Download" button at the bottom of the page. Use the new files in your site files and the navbar will stay collapsed up until the browser is the width that you set.
You can't show the 3 lines at every resolution of your website. Bootrap only condenses the nav as the screen gets smaller. If you want to show the 3 lines you'll have to find the CSS for that in the bootstrap file and mimic it with new CSS conditions.
Related
I am having a problem with displaying my navbar within my Joomla 3 website when resized to a tablet/mobile size.
For some reason I have a grey nav button appearing on the left and when i click this a blue nav bar appears on the right hand side with the menu then dropping down.
How can i make it so that I have either the grey or blue box and then when clicked the dropdown appears but all from one side.
I am confused as to why both are appearing.
When checking with firebug, I can see that one is navbar pull-left class and the other class is nav-collapse.
There are several variables to deal in this matter.
First, make sure version of bootstrap want to use and what you're really using.
Second, if you want to use the bootstrap version 3, make sure it is not charging well, version 2, which is the default Joomla brings. This will you manage in your template.
Third, you may also need an override of template for the code generated by joomla, run right.
I leave part of the code that you need for all this.
Get bootstrap 3 in joomla template. Copy js and css files to directorys and...
$doc->addScript($tpath.'/js/bootstrap.min.js');
$doc->addStyleSheet($tpath.'/css/bootstrap_3.css');
To avoid conflicts, how not to load js files it is as follows:
unset($doc->_scripts[$this->baseurl.'/media/jui/js/bootstrap.min.js']);
In this case, we remove the bootstrap.min.js joomla file loaded by default.
How can one easily alter the collapse breakpoint on bootstrap v3's navbar?
The documentation says
Changing the collapsed mobile navbar breakpoint The navbar collapses
into its vertical mobile view when the viewport is narrower than
#grid-float-breakpoint, and expands into its horizontal non-mobile
view when the viewport is at least #grid-float-breakpoint in width.
Adjust this variable in the Less source to control when the navbar
collapses/expands. The default value is 768px (the smallest "small" or
"tablet" screen).
But there is no LESS file that I can see and I really want to create a custom file to override this behaviour rather than mess around with the source files.
Specifically within the Bootstrap gem file structure, I am looking for the #grid-float-breakpoint variable.
If you're compiling from source (LESS files). Just open variables.less and search for the #grid-float-breakpoint.
Its default value should be #screen-sm-min, you're free to change this to any value compatible - a variable or a static value.
Just checked my site http://www.traumbad-muenchen.de in this tool http://quirktools.com/screenfly/ using the tablet setting Apple IPad 768x1024.
For this size the navigation menu seems to be too big, cause it is displayed in two lines. Thats why I would like to set the responsive breakpoint to 800px width so that instead of the navigation menu the navigation for mobile version is displayed (≡ menu symbol on the top, right corner).
What do I have to change in the responsive.css to get this done?
Thx for your tips.
BR
Heidi
There's nothing to change in responsive.css but instead you will be modifying the main style sheet # style.css
Simply replace all the instances of 719px to 800px
Now replace all the instances of 720px with 801px
You can copy paste the whole style sheet in a notepad ( or any similar tool ) and then start replacing just the 719px part and 720px and you should be good.
I'm using Bootstrap 2.3.0 on the following website: www.agrium.com/AgTracker
The problem I am having is that when the browser window is resized or when a user is using a tablet/phone, the two logos at the very top of the page are not displaying as I would like.
Below I am showing this behaviour using Chrome on my desktop.
Situation #1: full screen display, logos are spread out and full size. I'm happy with this.
Situation #2: screen size is decreased, but logos are still full size. I would like for either the logos to stay on the same line and for the logos to scale (shrink).
Situation #3: this would likely be solved by whatever fixes situation #2, but I just wanted to show that if I shrink the browser width further, the Agrium logo has scaled (yay!) but the AgTracker logo has not (boooo).
Any help with updating the CSS or way I am using Bootstrap that allows for the logos to both scale and remain on the same line would be appreciated.
There are a couple of ways to solve this problem:
At first, you should recognize that the first two images are actually not two but just a single image. Using this technique, you can make a single png or jpg file with all these three images in combined into a single image file. I would not recommend this, so I would like to propose a much more robust solution using CSS. Please look at my second point.
You can use CSS3's in built feature known as CSS3 Media Queries.
This technology allows you to create responsive websites and be able
to dictate how your content appears on a variety of devices like
mobile, tabs or desktops.
I am having issues getting my Instagram images to display properly. I have tried all types of tricks and changes but cannot get it to look consistent on both desktop and mobile. It looks perfect when at full window size and across all browsers (except mobile), but when I change the size of the browser viewing window it gets all weird.
Here is my issue:
I need all the horizontal Instagram images to be responsive, meaning when I do change the size of the browser window they will adjust to the dimensions that are appropriate to view them properly. I want them to always stay in a row of 5 images across...
Here is a link to the work in progress:
http://www.jaygiroux.com/wordpress/
I have tried modifying the instapress.css to the best of my abilities but now I'm just stuck. I tried using percentages instead of pixels in some places but it's still not working...
What im reading online is that until version 3 nivo slider is not responsive, so you might want to update the library.
http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/
Also i noticed that you're calling the tag twice (the first one is between the ie class compatibility code) so watch out for that too.