0
Welcome Guest! Login
0 items Join Now

SOLVED Display main menu items n menu based on screen width

Last Post
Search Topic
    • eRimkus's Avatar
    • eRimkus
    • Sr. Rocketeer
    • Posts: 168
    • Thanks: 2

    SOLVED Display main menu items n menu based on screen width

    Posted 11 years 6 months ago
    • Would it be possible to show certain menu items in the main menu depending upon the width of the viewport or screen? For example, the main menu has items items A, B, C and when the website is viewed with a phone you are able to see menu items A, B, C, D and F.

      website: www.domain.com
      Gantry: 4.1.17
      Joomla: 3.1.5
      Template: Gantry template 4.1.15

      TIA
    • Last Edit: 11 years 6 months ago by eRimkus.
    #1029487

  • Re: SOLVED Display main menu items n menu based on screen width

    Posted 11 years 6 months ago
    • Hello,

      Yes, absolutely. Let's take your About Us menu for example:
      /*Large*/
@media only screen and (min-width: 1200px) {
 div#rt-header ul.gf-menu li.item238 {
    display: none;
}
}
 
/*Desktops*/
@media only screen and (min-width: 960px) and (max-width: 1199px) {
 div#rt-header ul.gf-menu li.item238 {
    display: none;
}
}
 
/*Tablet*/
@media (min-width: 768px) and (max-width: 959px) {
 div#rt-header ul.gf-menu li.item238 {
    display: none;
}
}

      Place that code in your custom CSS file and you'll find the About Us menu item will only appear in the Mobile View. If you are looking for other item numbers (ie item238) use a Developer Tool such as Firebug or open up the menu item in Joomla and find the ID.
    • Kind regards,
      Reggie

      Learn to code for free.
      www.freecodecamp.org
    #1029552

  • Re: SOLVED Display main menu items n menu based on screen width

    Posted 11 years 6 months ago
    • Are you familiar with CSS media queries at all? :
      /*Large*/
@media only screen and (min-width: 1200px) {
 
}
 
/*Desktops*/
@media only screen and (min-width: 960px) and (max-width: 1199px) {
 
}
 
/*Tablet*/
@media (min-width: 768px) and (max-width: 959px) {
 
}
 
/*Mobile*/
@media (max-width: 767px) {
 
}

      You can make changes to your website in specific views. Just insert your selector, property, and value as you would normally. As an example, if we want to display a blue background for an element of a website only in the mobile view, you would use:
      /*Mobile*/
@media (max-width: 767px) {
 
.roksprocket {background: blue;}
 
}

      Also, check out our responsive support classes:
      www.rockettheme.com/forum/index.php?f=81...08412&rb_v=viewtopic
    • Kind regards,
      Reggie

      Learn to code for free.
      www.freecodecamp.org
    #1029553
    • eRimkus's Avatar
    • eRimkus
    • Sr. Rocketeer
    • Posts: 168
    • Thanks: 2

    Re: SOLVED Display main menu items n menu based on screen width

    Posted 11 years 6 months ago
    • Reggie - thank you for this. It's works perfectly. It's exactly what I've been looking for.
      Thanks again!
    #1029882

  • Re: SOLVED Display main menu items n menu based on screen width

    Posted 11 years 6 months ago
    #1029884

Time to create page: 0.070 seconds