I'm trying to shrink the navbar height for mobile sizes. What I've tried shrinks the navbar, but the JS menu doesn't function. Any ideas?
.navbar-fixed-bottom { height:35px; }
If you download the custom version or you are using the less css, just change the #navbarHeight variable to desired height.
You can, of course, change it manually, but it will have to be done in multiple places. Use navbar.less file to look for all the references where #navbarHeight is used.
I also didn't see the fact that you wanted to do it only in the mobile site. The .less file for the navbar for the responsive design is responsive-navbar.less. The height is the same for both desktop and mobile navbar, and there is nothing set specifically for the mobile one, but without a bunch of testing I wouldn't recommend changing it.
Related
Here's the live URL of my web page, however I'm using the latest version of bootstrap. All 'css' is included in 'master.css'. The problem is this box or any other(later on if you fill the form) is not responding to any responsiveness. Tried on mobile as well! What am I missing here?
http://mplanner.esy.es/mplanner/
I've included only bootstrap.min.css and some custom styles at the end in 'master.css'
You added a fixed width to .col-min and to .form-area-inner, .form-planner-inner
Therefore, the "responsive"-width of bootstrap is being replaced by the fixed witdhs.
Removing those fixed-widths will give you back the responsiveness. You can use some media queries if you want to keep the fixed widths on layouts with a certain width.
I have a website that I am working on that has a simple widget that shows the current status of certain systems. The problem I am having is that when the view goes to mobile (iPhone size about) or the screen on a browser is creating the same effect, the rows that have objects in them start to stack and become invisible or cut off. I don't want these to ever stack because the design doesn't make sense that way. Is there a way to make is so something will never stack? I can't seem to get any clues as to how to fix this since the bootstrap choices don't go that small. It seems like it would work if there was a col-xxs-* class or a col-mobile-* class.
You can customize twitter media query breakpoints
so the col-xs-* can start from 200px instead of 480px for example.
here is the link:
http://getbootstrap.com/customize/#media-queries-breakpoints
Edit the variables and download that version. you can also use bootstrap Less to edit these variables in your project as it suites you instead of re-downloading the files every time.
I'm not sure if this helps,
Make sure the viewport is configured correctly:
Make sure you don't have content that is wider than the viewport.
For instance if you have an image that is wider than the viewport set the CSS to
max-width:100%;
From what I can understand you don't want to stack the divs one below the other in mobile view. Then try to use class like table-responsive that allows the content to appear with a horizontal scroll bar.
Then you have to set the min-width for those columns that you don't want to wrap.
Or white-space:nowrap
The issue that I was having is there was a custom div class that was put into the hosting software's global styling. This class duplicated the idea of the Bootstrap col classes. It started from col-all-12 to col-all-1. The problem is this would override all the other bootstrap styling and make things a certain size no matter what width the screen is. I appropriately adjusted these and it seems to work. I had to rebuild this code from scratch but now it is good!
Thank you to all those that helped and gave suggestions!
thank you for your support. I have created one litte bootstrap page.
I have only two little problems. The logo position on the desktop browser is different to the position on the mobile device (iphone).
i found out that if you change the css code "bootstrap.min.css" from the container-fluid - padding-left:15px; to padding-left:0px; the logo will be at the correct position on the desktop browser but on the wrong possition on the mobile device.
sample image
do you have any ideas to solve this problem?
The reason why you are experiencing this is because twitter bootstrap utilizes media queries. A media query essentially allows for a css class or id to have differing stylings for different screen widths.
To fix this you could go in and alter every media query in the minified code to fit your requirements. A better solution however, is to write your own css in a separate file that over rides the bootstrap.
Example
So here is a div with container fluid
<div class="container-fluid example">
// your div content
</div>
Here is your css that will override the padding left.
.example {
padding-left: 0px;
}
I just started debugging my ASP.NET website on my android and noticed that the fixed navbar does not grow/shrink when I zoom in/out. Instead it always shows the top-left of the navbar and the navbar stays the same size.
If I switch to static navbar then it scales perfectly when I zoom in/out. Is this a known problem or have I missed something/done something wrong?
Is there maybe a way to make the navbar static on cellphone only? and fixed on desktop?
I don't have enough reputation to comment on your question so I have to post this as an answer.
Have you tried using media queries that change the height of the the navbar? Have in mind that you might need to use additional media queries for the items in the navbar, e.g. input, buttons, text size etc.
#media screen and (max-width: your-desired-width-in-px) {
#id-of-the-navbar {
height: desired-value-in-em/px/%;
}
}
One quick way of doing that could be to use media queries
I'm using Slidebars as extension to create off-canvas menus for my site. Custom width can be set using data-sb-width attribute. I have set it to 370px like this:
<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="370px"></div>
On mobile i need to change it to 280px, but I don't know if this is possible with CSS media queries. Help would be needed.
As this is an HTML attribute and not a CSS style, you won't be able to directly use CSS media queries for this.
I see several options to explore:
set the data-sb-width using Javascript or jQuery (before you setup the slide bars)
use two slide bars with different widths, and use media queries to hide one or the other (not quite sure the slide bar script will like that)
give the width as a percentage rather than a fixed width, but that may be difficult to control