I'm using the Bootstrap affix side-navigation as used in the Bootstrap documentation. As you can see there, the scrollspy doesn't make any sense when the viewport is smaller than 768px and the page is switching to mobile view. Hence, I want to deactivate the scrollspy as soon as the page switches to mobile viewe. Keep in mind that the fix should only apply on the sidebar-navigation – not on navbars. Ideas, anyone?
The fix is easy enough. Use media queries and define position:static; for your sidebar-nav div for mobile views, eg
#media (max-width: 767px){
.sidenav.affix { /* change sidenav selector to match your layout */
position: static; /* removes the affix behaviour */
width: auto; /* customise as required */
top: 0; /* customise as required */
}
}
Related
CSS newbie here. I'm trying to eliminate the vertical scroll bar that appears on mobile for a calendly widget.
Widget embed code:
<div class="calendly-inline-widget" data-url="https://calendly.com/lohrandcompany/introduction-meeting-web" style="min-width: 320px; height: 680px;"></div>
<p>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
Formatting looks great in desktop view, but I'd like to eliminate the vertical scroll bar that appears on the page (https://avt.850.myftpupload.com/get-started-now/) in mobile view:
I've tried adding a media query to the custom css section to adjust the widget's height based on device screen size but it doesn't seem to change anything:
#media only screen and (max-width: 780px) {
.calendly-inline-widget {
height: 1050px;
}
}
Please advise!
Aha!
I just had to specify the mobile MIN height:
#media only screen and (max-width: 780px) {
.calendly-inline-widget {
min-height: 1050px;
}
}
That did it!
I am using this megamenu code:
https://codepen.io/riogrande/pen/MKXweV
But I have added
.menu-container{
position:fixed;
}
This works for desktop versions, but when you shrink to mobile, it means that you can't see all the menu items. I can add
.menu-container{
overflow-y:scroll;
max-height:100%;
}
to the mobile styles to create a scroll bar, but I would prefer to not have a scrollbar, I just want the user to be able to scroll down to see all menu items the same way it works when the position is set to relative.
How can I achieve this effect without losing the fixed position on mobile?
actually mobile devices don t show scroll bar. Only on dev mode you see scroll bars.
Change overflow-y: scroll to auto;
Or remove the scroll bar
.my-div-class::-webkit-scrollbar
{
width: 0; // Or display: none;
}
Note that this may not work in any browsers.
Target the div that you want no scrollbar
I'm building a site for giggles http://briannabaldwinphotography.com/. My mobile menu button won't go away with display:none in safari on my iphone landscape mode, although it works in Chrome on my phone. I want the #menu-button to show when the device is under 500px and to disappear when it is above 500px. The menu button is added in through jquery with the id of #menu-button. If you use dev tool and look in the sources for css_tablet.css you'll see I have #menu-button set to display:none. Any advice much appreciated.
$("#menu").addClass("js").before('<div id="menu-button"><img src="third_logo.png" alt="menu"></div>');
$("#menu-button").click(function(){
$("#menu").toggle();
});
$("li").click(function(){
$("ul").hide();
});
Add this CSS -
#media screen and (min-width: 500px) {
#menu-button {
display: none;
}
#menu.js{
display: block !important; // You must have to use '!important' as javascript adding inline style on the menu (display block/none)
}
}
Above CSS will solve the Button hiding issue and also the issue we talked on the last comments.
For better understanding of Media Queries for different devices. Look at this article - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
In your "css_tablet.css" all the css is defined within a media query which is applied only to screens with a min-width of 500px.
#media screen and (min-width: 500px) {
#menu-button {
display: none;
}
... more css ...
}
In portrait view, an iPhone 5 is 320px wide, iPhone 6 is 375px and iPhone 6+ is 414px. So all of these phones dont apply the css from your "css_tablet.css" stylesheet.
So it isn't phone/tablet specific.
I've been searching a lot but still didn't find anything similar.
If replace navbar-collapse with navbar I am getting the looks as if you've toggled the show collapsed menu items button.
I've also found questions how to decrease the breakpoint at which the navbar collapses, but it's not what I need.
What I need is to remove the collapsible menu generally. Any idea?
Bootstrap is displaying collapsed elements because of the way responsive design works:
The CSS code is written for the smallest viewport, and then using media queries, the design is progressively enhanced to render elements for each specific viewport.
Thus, the CSS code that is responsible for displaying the "normal" navbar (i.e. the navbar for a medium to large viewport) is wrapped around #media (min-width: 768px). That means that as soon as your viewport goes under that value, the elements revert to their original design, which is the small viewport design.
If you do not want to change the breakpoints as proposed in this question, you have a few other solutions:
Use the non-responsive Bootstrap library
Create your own navbar by studying the non-responsive one from Bootstrap and copying the relevant code.
You can put the navbar links inside navbar-header, and then add some CSS to override the Bootstrap defaults..
.navbar-nav {
margin:0;
}
.navbar-nav>li {
float:none;
display:inline-block;
}
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
Demo: http://www.bootply.com/118426
Alternate (display scrollbar instead of wrapping): http://www.bootply.com/118304
i am having this issue and i have just solved it
this will undo the collapse
/* Undo the collapsing navbar */
.navbar-collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-toggle {
display: none;
}
.navbar-collapse {
border-top: 0;
}
About a year ago, #Andres Ilich provided a beautifully elegant answer to centering the navigation bar in Bootstrap. An excerpt from the posted answer is below:
<div class="navbar navbar-fixed-top center">
<div class="navbar-inner">
....
</div>
</div>
And then you can target the .center class like so:
.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align:center;
}
Since this affected the drop down menu as well, he added this:
.center .dropdown-menu {
text-align: left;
}
So that the drop down menus would behave normally.
Now I am facing a similar issue. The navigation bar is beautifully centered. Dropdowns work great. But, when you get into tablet and mobile viewports, the mobile menu also gets centered. Simply aligning the text to the left does not solve the issue since each unordered list item needs its own line.
I have been trying to figure out a way where I could simply add a class inside a media query that would undo this, but I haven't been able to find a solution.
Refer to this jsFiddle to see what I am talking about: http://jsfiddle.net/persianturtle/rAYyk/2/
My question: Is there a simple way (<50 lines of code) to undo the above code inside a media query so this navigation menu would be centered desktop view and displayed as normal on tablets and phones?
If this cannot be done with pure CSS, can a step-by-step explanation of how a jQuery solution would work? Since I have h5bp, I already have jQuery 1.9.0 linked in.
If you'd like to make a CSS change which only affects the tablet and mobile viewports, you can add the CSS overrides you need in the bootstrap-responsive.css file.
This is where the #media queries are located that perform the "responsive design" and stylize the tablet and mobile viewports.
#media (max-width: 979px) {
.center .navbar-inner {
text-align:left !important;
}
.center.navbar .nav > li{
display:block !important;
}
}