Jump to content

Archived

This topic is now archived and is closed to further replies.

dario

Navi and Media Query

Recommended Posts

dario

I'm trying to target the collapsed menu (hamburger) but cannot figure it out.

My first goal is to hide the main Navi at 1188px, then show the collapsed hamburger at the same time.

 

The hide part of the code (below) works fine. The show part does not:

@media (max-width: 1188px) {
	#site .section-navi .navi-right {
		overflow: hidden !important;
		height: 0!important;
	}
}
@media (max-width: 1188px) {
	ul.inline-list .menu-toggle {
		display: block;
	}
}

What am I missing here?

 

My secondary goal is to make the toggle go down instead of to the side.

Where is this functionality in the system? If it's in the CSS, I'm clearly missing it.

Share this post


Link to post
Share on other sites
Danny

Hi,

 

If you wish to have the Hamburger display at all times, which is what I think you want, simply select default from the Menu option in Navi.

 

 

Also not sure what you're referring to when you say toggle down instead of the side ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dario

Hi Danny,

Thanks.

 

No, I only want it to display below 1188px screen width.

I'd change the width in the LESS file but don't want other mobile-based items to be affected by this too.

 

As for the side/down toggle.

Default (I think) is that when one clicks/taps on the hamburger the site translates to the left (or the menu translates from the right, over to the left).

I want the menu to translate down.

Share this post


Link to post
Share on other sites
Danny

You will need to use a media query on the collapse class. Use display:none or display block depending on what you want to do. I recommend you inspect via Chromes dev tools if you want this to be specific to the Navi only.

 

In regards to the Mobile menu slide in, this can not be changed without extensive CSS and possibly jquery. Therefore, I would probably recommend you use UberMenu which has these options.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dario

Thanks Danny.

I was inspecting via Chrome Dev but cannot seem to find the class.

 

Neither of these two work:

@media (max-width: 1188px)
ul.inline-list.respond .menu-toggle {
  display: block;
}
@media (max-width: 1188px) {
	ul.inline-list.respond .menu-toggle {
		display: block;
	}
}

I was hoping to avoid Uber Menu but perhaps you're correct. I'm using it on a few other DMS site and it works fine.

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×