Menu Wrap

Sparkling
1

Hi

I have found an issue on menu wrap/resize … When browser is resized even before the menu wraps to two lines prior to 768px… The drop down menu is only accessible by clicking the small caret and the menu is displayed as in the image. I checked another site I have made with this them and I have the same issue.

Can you help?

My website is valleylanes.net/ybc/

2

Hi there

Have you modified any menu css rules in the theme?

3

No in fact I deleted my child theme and all plugins and reinstalled the theme from scratch I still have the same issue

The only thing I have tried is changing the colors in the header customizer

4

Hello there,

I hope you are doing well today.

Was 768px the exact width that you used to test this?

Best Regards,
Support

5

No at 768 work properly it’s when you shrink from full size which is over 1200 pixels that the problem occurs… so between 768 and 1200 ideally I would like the have to change to mobile at 991 pixels because that’s when the menu starts to wrap

6

Hello there,

In this case try this CSS:


@media screen and (max-width: 1200px) and (min-width: 700px), (min-width: 1100px) {
.navbar-default .navbar-nav > li > a {
    line-height: 20px;
    font-size: 10px;
}

.navbar-nav > li {
    padding: 5px;
}
}

Best Regards,
Support

7

Okay willl do where should I be placing the CSS in the additional CSS under the editor or should I put my child theme back in and place it in the Styles. CSS

8

Hi there,
Sorry that I missed providing this information.
As for the CSS code, please have it added within the Appearance>Customize>Additional CSS section.

I hope it gets to help.
Best Regards,
Support.

9

Ok… so I placed the code… it appears that CSS has shunk the menu text size and now it doesnt wrap but the drop down menus are still wrong - white background with the text having a black background with grey text and on hover the box turns pinky/red…

My ideal situation would be to have my nav text stay at 14px switch to mobile nav at a resize on 991px and have the menu work like it does full screen on all sizes before hitting the 991px. Is this possible?

10

Hi there,
Thanks for writing back.
In this case, could you try out the following CSS code:

@media only screen and (max-width:991px){
ul.dropdown-menu>li>a {
color: #000 !important;
background: none !important;
}
}

I hope this helps.
Best Regards,
Support.

11

Hi

Still no joy… Is there a way to make the 767px nav start at 991px… That way the menu wont wrap and the mobile nav will take over and everything will work great. If not I need to specifically target just the dropdown menu li > a but that also effects the main nav so when I change that to a white background the whole nav disappears…

have a look at the site and try the resize to 991px and then the nav should wrap trigger a drop down and you will see the problem.

12

Hi there

Sorry about that, looks like we have a same problem on our demo:

and i just reported this problem to our developer, you can see it here:

13

Hi @fivepinpro it is fixed in fixed - https://github.com/ColorlibHQ/Sparkling/issues/230 by mahendrapratap4022 · Pull Request #258 · ColorlibHQ/Sparkling · GitHub
You can have the latest version from github.
Thanks
Colorlib Support

14

Thank you @mahendra.pratap4022 :slight_smile: