Dropdown menu - mobile

Sparkling
1

Header menu dropdown items are almost impossible to expand when using the mobile version of the page. You have to carefully tap the small down arrow, which is really unintuitive and fairly difficult on some devices. In my opinion, it would be a much better solution if the menu item itself acted as the menu opener.
Is there anyway to make it work as i wish?

2

Hi there

Hope you are having a good day :slight_smile:

Please provide url and I will take a look

3

Hi,

My day is great - it´s friday ?.. Hope yours is nice too!
The url is: badrumsinspiration.inspirationsbilder.se

I can add one more question on the same topic…
When folding out the menu on mobile (android) it covers 60% of the screen an needs to be scrolled, can you make it fold out like 80% instead so you wont have to scroll ?

4

Good morning :slight_smile:

thank you, my Friday was also nice :wink:

Yes, this is possible, please add this CSS in appearance - customize - additional CSS

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
max-height: 430px;
}
@media (max-width: 767px){
.navbar-default .navbar-nav > li > a {
margin: 0px 10px;
}
.navbar-nav > li > .caret {
display: none;
}
.navbar-nav > li > .dropdown-menu {
padding: 0;
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
display: block;
}
.dropdown-menu > li > a {
color: #f8f8f8;
}
}

Thanks!
Colorlib Support Team

5

I would like on the mobile site to make it easier for a drop down menu it is very hard to hit just the caret

scottsdalelanes.com is my url

site is fine on desktop

Please help

6

Hello @fivepinpro

So, how exactly you want it? what is your idea?
I just checked your website and hamburger menu is normal for me, there is no problem here

7

Its not the hamburger… On the mobile when you click on the drop down menu you need be so precise on the caret on the menu to open the next section if you look at league bowling and try to go to fall league you have to hit the caret perfect to open it can it be bigger or the whole word

8

Hello @fivepinpro

Please add this CSS in appearance - customize - additional CSS

.caret {
border-top: 10px dashed;
border-top: 10px solid\9;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}

Thanks!
Colorlib Support Team

9

Thanks that makes the mobile version easier to use… But the desktop version the caret on the drop down is small again but not on the mobile version… Can that be fixed?

10

Good morning

Ah, that’s ok, we can deal with it too :slight_smile:

try this code instead:

@media only screen and (max-width: 768px) {
.caret {
border-top: 10px dashed;
border-top: 10px solid\9;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}

}