[Colin TParticipant]

Hi there!

Great theme guys. I really love it. I am using a Child theme of Integrity Light in my WooCommerce site, but I am having issues trying to change one or two navigation things and I was wondering if you, or anyone else on the forum, could help me?

Firstly, I would like to change the rate (screen size) at which the Navbar collapses to the mobile button version. The reason being is that if I view my site via my iPad in portrait mode, I only get the mobile button icon, even if there is lots of space left, and if a browser window on a MacBook Pro is only 2 thirds open, I only get the button too. Please can you point me in the right direction of what CSS to change and recommend a screen resolution (maybe just below 768px?) for it to collapse at? Currently I think it is set to 976px, but I don’t know whar CSS to change.

Secondly, while I have your attention, much as I like the little bars that appear over the menu items when you roll over them, I would like to be able to remove them. Or at least change their colour to the same as the background so that they don’t appear. I am trying to go for a clean, minimalistic design.

My site is: thegreengables.co.uk/store if you need to have a look. The pages are private during development, but you can still see the navigation I am going for. Please ignore the checkout and search in header, I haven’t finished with the CSS for that yet. 🙂

Many thanks in advance. I look forward to your reply.
Kind regards
Col

[SupportMember]

Hi Colin,

For the navbar you can play around this CSS media query to achieve your desired styling on tablet sizes:

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  YOUR CSS HERE
}

For the bars over the menu:

.x-navbar .x-nav > li > a:hover, .x-navbar .x-nav > .current-menu-item > a {
  box-shadow: none;
}

Please try those out and let us know if that works.

Thanks!

[Colin TParticipant]

Many thanks for the speedy reply. Great support!

The ‘bars over the menu’ solution worked a treat, many thanks for that. However, I am still having issues with the collapse of the menu.

I can see that the line I need to change in ‘integrity-light.css’ is: @media (max-width: 979px) {… on line 4117. When I change this on the fly using the Inspect Element of Safari, it does exactly what I need it to. However, when I come to override this code using the Child CSS, I simply can’t seem to override it. Even adding ‘!important’ to all the elements.

I did notice that the closing bracket for this @media change is way down the code, but even adding all that code to my CSS didn’t change anything.

Where am I going wrong?
Thanks in advance.
Colin

[RadModerator]

Hi Colin,

If you’re using a cache of minifier plugin, you may delete their cache before testing. Or you can disable them temporarily as you develop your site.

You may double check your css too if there is any missing semicolin, quotes, or closing bracket.

Then you may provide us a login so we can check it, in case it won’t work.

Thank you.

[Colin TParticipant]

Hiya. Thanks for the speedy reply.

I am not using any cache plugin and all other CSS seems to work. The menu and navigation can be viewed without logging and so you should be able to see the CSS.

My theory is that I am adding the wrong CSS. Like I mentioned before, if I change the number on line 4117 in the ‘integrity-light.css’ (@media (max-width: 979px)), it does what I ask. However, if I copy all of the code that is encased in the @media brackets, nothing happens. even if I add !important to it all. Any ideas?

What is the name of the collapsed menu and do I just need to copy that within the @media (max-width: 767px) {} brackets, or does all the relevant CSS (width: font: etc) need to be in there too?

This one has got me stumped.

Also, on a slightly related topic, (let me know if you rather I start a new post on this question) once the menu has collapsed to the menu button and the user taps that button, they see all of the categories AND and all of the subcategories all ready uncollapsed and visible in a very long list. Is there a way I can change this so that when the button is tapped, all they see is the categories ( 7 or 8 categories ) and then they tap one of those category to see their subcategories?

The reason for the above is that my site is a WooCommerse site and so there will be lots of categories and subcategories and having everything already visible is not great user experience and so hopefully a little code change will make me very happy.

Thanks again!
Kind regards
COlin

[RadModerator]

If you want to apply your css to a certain break point, then it is important to always use media query and not just what inside of it.

@media (max-width: 767px) { /* apply only at screen width 767px and below */
/* then your css */
}

Menu break point is 979px, so it should be like :

@media (max-width: 979px) {
   /* all css goes here for nav or not nav */
} 

What size should it be? Collapsed menu does not have specific height, to maintain fluidity and proper spacing.

About your other query, It is possible, but require customization. As of now, menu is not setup for that. For that to work, it has to disable the parent menu’s link to avoid navigating away when clicked, then add javscript code that will open its child menu. You may contact a developer for this, or use any other menu that you can easily integrate with x.

Hope this helps.

[Author]

Posts