Jump to content

Archived

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

quintinm

Responsive breakpoints to show hide content

Recommended Posts

quintinm

Hi.

I am really new to responsive breakpoints and want to find out how i can hide the "navbar" and show the menu toggle at a certain breakpoint.

Currently that happens at around 750 / 760px wide.

 

What do i need to edit (and how) to make that happen at 960px for example.

I also want to hide larger masthead images at certain breakpoints as well.

 

I found these, do they define when things happen?

What i mean by that is do i insert code within those elements if i want to hide or show things?

Can i also change the values (320px) etc?

 

I just cannot seem to work this out...

 

 

/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/





/*========== Mobile First Method ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}



/*========== Non-Mobile First Method ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}

 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

To alter how something is displayed or hide it via CSS, you will need to use media queries, which you have provided examples of above. You need to use them, this is how you can change how something is styled once it reaches a certain width.

 

For more information on media queries see these articles:

 

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

http://css-tricks.com/css-media-queries/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
quintinm

Hi Danny, thank you for the info, the css-tricks example was very helpful indeed in providing clarity.

 

Would i be able to add the following to the custom less / css field and should it work?

I tried it and it didn't work, so not sure where else i should be putting it or if the thinking and css is wrong.

 

/*--hide the menu--*/
@media (max-width: 960px)
#site .navbar .nav-collapse {
overflow: hidden;
height: 0;
clear: both;
}


/*--show the toggle--*/
@media (max-width: 960px)
#site .navbar .nav-btn-navbar {
display: inline-block;
}
 

 

Share this post


Link to post
Share on other sites
Danny

Your code isn't valid as you're missing the parenthesis at the end of the media query line and another at the end of the rule itself. You should probably need to use the !important declaration.

 

@media (max-width: 960px) {
  #site .navbar .nav-collapse {
    overflow: hidden !important;
    height: 0!important;
  }
}
 
/*--show the toggle--*/
@media (max-width: 960px) {
  #site .navbar .nav-btn-navbar {
    display: inline-block;
  }
}

Please search our forums, before posting!

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? 

×