i have a website done in bootstrap, the menu is working fine in desktop
<button type="button" class="dropdown-toggle pull-left" data-toggle="dropdown" data-target="#navbar-menu" aria-expanded="true">
<i class="fa fa-bars"></i><span style="font-size: 10px;width:100%;float: left;"><b>menu</b></span>
</button>
now when i loading it mobile, and open the menu, its not scrolling so i am not able to see the options in the dropdown, instead the background is scrolling, i searched and saw an answer in google like below:
.navbar-nav {
height: 150vh; // <-- This will fix the collapse animation
}
.navbar-collapse.in {
overflow-x: hidden;
padding-right: 17px; // <-- Hide scroll bar, but still being able to scroll
}
#media (min-width: 768px) {
.navbar-nav {
height: auto;
}
}
but still the menu is not scrolling and the background is scrolling. can anyone please tell me what could be wrong here, this is my live url enter link description here
thanks in advance
i finally got a fix for this, i gave hieght for the menu and gave overflow scroll
.navbar-nav {
max-height:400px;
overflow-y: scroll;
}
Just add navbar-nav-scroll class to the existing navbar-nav class, that will solve all scrolling issue.
Related
We have a weird issue with our SVG icons in our mobile menu. They appear very big in the mobile version although they are set at 1.6em.
Go here, open the hamburger menu and click on the "Shop Now" Dropdown, you will see the size of the icons
We tried the following CSS in the WordPress Customizer but it seems like it's not that class, and that's weird because using the Chrome Developer Tools if we modify that class it seems to change.
.sidr-class-icon sidr-class-before sidr-class-svg {
max-width: 15%;
}
Note: Using !important tag also doesn't work.
The class of this image is class='sidr-class-icon sidr-class-before sidr-class-svg'. So to select it in css you need to use:
.sidr-class-icon.sidr-class-before.sidr-class-svg { ... }
And not:
.sidr-class-icon sidr-class-before sidr-class-svg { ... }
.sidr-class-icon.sidr-class-before.sidr-class-svg {
max-width: 15%;
border: solid red 3px;
}
<img src="https://www.safe-company.com/wp-content/uploads/2020/08/bmeeting.svg" class="sidr-class-icon sidr-class-before sidr-class-svg" aria-hidden="true">
Try setting height and width attributes for your img tags.
I have a navbar that I'm building with bootstrap based off this W3Schools example here.
When you are looking at the menu collapsed on a small screen, it looks like this:
And if you don't click off of the dropdown and expand the screen, the dropdown stays open.
Question:
Is there a way to force close a dropdown menu when you switch from one a small screen to larger one?
Why I want to do this:
For my current navbar, I wrote a media query so that when you hover over the dropdown on desktops, you see the menu. I also disabled the the top menu item so the user can't click it.
I have that hover there and I disabled the top link so users don't have to click to open or close the dropdown menu. And that works fine...until you go to a smaller screen size, click the dropdown and then expand the screen again. At that point, the dropdown is open and you have to click off of it again. I want the dropdown to close so the screen is expanded (then the user can go back to hovering over the dropdown menu).
Not sure if this is helpful, but this is the media query I wrote for the large screen/desktop behavior:
#media(min-width: 768px) {
/**Background link hover**/
.navbar .navbar-nav > li:hover:after{
width: 100%;
background: black;
}
.navbar .navbar-nav > li:after{
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.dropdown{
position: relative;
display:none;
}
.dropdown:hover .dropdown-menu {
display: block;
position: absolute;
}
.disabled-desktop-link {
pointer-events: none;
cursor: default;
}
}
You'll just want a JS event listener on the window, which fires when you resize the window.
Read into this - https://developer.mozilla.org/en-US/docs/Web/Events/resize
As you can see, you add a class open to your li.dropdown when you click on it.
So, what you you can do is to remove the class open when you resize your window.
Here is a simple way to do it :
var windowWidth = $(window).width();
$(window).resize(function() {
if (windowWidth >= 992) // the width you want
$(".dropdown").removeClass('open');
});
Here is a jsfiddle :https://jsfiddle.net/5oquf01q/3/
I'm currently in a project developing an Angular SPA that has dropdown menus in its main navbar. To get this effect, we are using CSS: hover selectors. The issue is that when an action is performed within this dropdowns we would like to close them without hindering the ability to open them again. For example, if a user opens a link within one of this dropdowns (internal link with ui-sref) he is then taken to this particular state, but the dropdown would still be visible until he moves the mouse outside it (and partially obscuring the new content shown). We would like the dropdown to be closed when an action within is performed and if the user would like to open it again, he would be able to hover the mouse again over the trigger.
We tried removing and re-adding classes (even after a timeout) but the dropdown reappears again.
Link to a Plunker with a setup similar to what we are trying to accomplish: https://plnkr.co/edit/qzQk4r2WQFhwsgUWug39?p=preview
And the relevant portions (Angular controller omitted as it has no content):
HTML:
<div class="hoverable has-dropdown">
<button class="dropdown-trigger">Hover me!</button>
<div class="dropdown">
Dropdown content
<button ng-click="buttonAction()">Action</button>
</div>
</div>
CSS:
.dropdown {
display: none;
position: absolute;
top: 20px;
width: 100px;
height: 100px;
background: lightgrey;
padding: 1em;
}
.has-dropdown {
position: relative;
height: 20px;
}
.has-dropdown .dropdown-trigger:hover + .dropdown,
.has-dropdown .dropdown-trigger + .dropdown:hover {
display: block;
}
Thanks!
Finally solved it by using ng-mousenter and ng-mouseleave and dropping CSS :hover rules. As everything is based on JS I can just trigger mouseleave when I want to close them.
my objective:
In desktop view the "Select Province" menu should disappear.
And then reappear in Mobile View.
there are two of these. One is a select statement that appears in desktop view. the other is an <li> drop down that will appear in mobile
I am using a custom css + bootstrap. I placed the affected section in a block quote to better understand where my issue is.
I am using mobiletest.me to test for mobile environment.
What works:
In mobile view it drops down to the mobile nav.
If i used <section class="province-btn-remove"></section> it works and hides in desktop view--but messes up the styling.
What doesn't work:
the Dropdown menu that appears under the nav in desktop view, shouldn't be there, should be hidden.
The HTML code:
<nav>
<div>
<ul class="nav navbar-nav">
<li class="left">Home</li>
<li class="left">Register</li>
<li class="left">Find a Fundraiser</li>
<li class="left">Learn More</li>
<li class="right">DONATE</li>
<li class="provinces-btn-remove">
<li title="Select Province">
<li class="provinces-btn">
<a class="dropdown-toggle" data-toggle="dropdown">Select Province<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Alberta</li>
<li>British Columbia</li>
<li>Ontario</li>
<li>Nunavut</li>
<li>Manitoba</li>
</ul>
</li>
</li>
</li>
</ul>
</div>
</nav>
My CSS code:
#media screen and (min-width: 769px){
.provinces-btn-remove{
visibility: hidden;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
}
#media screen and (max-width: 768px) {
.provinces-btn {
width: 100%;
margin-top: 16px;
color: #FFFFFF !important;
background-color: #0066CC;
margin-left: 0px;
}
.provinces-btn:hover, .provinces-btnActive {
color: #FFFFFF !important;
background: #1975D1;
font-weight: 900;
}
}
#media screen and (max-width: 604px) {
.provinces-btn {
width: 100%;
margin-top: 16px;
color: #FFFFFF !important;
background-color: #0066CC;
margin-left: 15px;
}
}
If you're wondering why I am not just taking the select statement and place it into mobile view is because 1. I don't know how, and 2. I can't style the select statement to match the mobile view navigation. I asked about that in a previous question that remains unanswered.
Thanks for your time!
Your CSS (functionally speaking) is written correctly - but the HTML rendered via your link, is not in the same hierarchy as the HTML you pasted above.
You are attempting visibility: hidden on the .provinces-btn-remove class, but as seen in my screenshot below, it is a sibling to the dropdown, and not wrapping the dropdown.
And a side note, keep your breakpoints at 767px/768px, and not 768px/769px. Bootstrap breaks at the former. You will have 1px problems as you're resizing, if you do not update yours to 767px/768px.
If I've understood your question correctly, you should simply have to change:
#media screen and (min-width: 769px){
.provinces-btn-remove{
visibility: hidden;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
}
to:
#media screen and (min-width: 769px){
.provinces-btn{
visibility: hidden;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
}
You seem to be targeting a class that has no content, rather than the button you intend
Even after Jimmy Amash answer is correct, if you are using Bootstrap you should use their helper classes for hiding or showing elements according to breakpoints, so using CSS Classes hidden-md hidden-lg would accomplish your desired result.
<li class="hidden-md hidden-lg">Won't show on desktop breakpoint medium and large </li>
The purpose of using a CSS Framework its using most of it classes to help maintain code, as if you change Bootstrap LESS (or SASS) variables to change breakpoints pixel width your code should retain behaviour and rewrite as less as possible.
See Responsive Utilities on Bootstrap Docs for more info about visibility helper classes.
I am having a tough time fixing a small issue. I am little embarrassed in asking help for this CSS issue but a different set of eyes might help fix this.
ISSUE
Go to http://ajaxtown.com/uranium/
Extreme top you will find a bar (telephone number and social icons and search)
Now resize the window (mobile size)
Again maximize it to full width.
You will see the search icon coming down.
RESOLUTION
While experimenting with firebug, i found that if you inspect element on the search icon, you will find the below css.
.top-search {
float: left;
width: 40px;
}
If i uncheck float and then again check it, everything gets fixed. The search icon gets aligned with the social icons.
But I am not able work this out.
Any help will be highly appreciated.
Please let me know if I am not clear with my question.
Saha
I placed the search into the .social-icons div
<div class="social-icons top-social-icons">
<i class="icon icon-twitter"></i><i class="icon icon-facebook"></i><i class="icon icon-rss"></i>
<div class="top-search">
<a class="top-search-bt open" href="#">
<i class="icon"></i></a>
</div>
</div>
Quick fix
That works for me on Chrome (Canary)
<div class="social-icons top-social-icons">
//social icons here
<a class="top-search-bt open" href="#"><i class="icon"></i></a>
</div>
CSS fix
.topbar-right .topbar-right-inner {
border-right: 1px solid #E2E2E2;
width:163px;
}
#media only screen and (max-width: 767px)
{
.topbar-right .topbar-right-inner {
border-right: none;
margin: 0 auto;
}
}
I managed to solve it this way:
In CSS:
//Before
.top-search {
float: left;
width: 40px;
}
//after
.top-search {
display: table;
width: 40px;
}