0
Welcome Guest! Login
0 items Join Now

SOLVED Problem with column submenus

Last Post
Search Topic
    • Sebaca's Avatar
    • Sebaca
    • Elite Rocketeer
    • Posts: 647
    • Thanks: 0

    SOLVED Problem with column submenus

    Posted 11 years 3 months ago
    • Hello,
      http://www.microzone-dev.com/boistiere/
      I use the template Spectral. I would like to change the layout of the sub menu ("Nos Produits"). I have three columns and I wish it was my second column that is under the "Nos Produits" menu. Is it possible to center the submenu?
      To better understand what I want:
      This image is hidden for guests.
      Please log in or register to see it.

      Thank you in advance for your help.
    • Last Edit: 11 years 3 months ago by Sebaca.
    #1061997
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Problem with column submenus

    Posted 11 years 3 months ago
    • This will do it:
      ul.gf-menu li.item176 .dropdown {
     left: -300px !important;
}
      But, you'll have to use that inside media queries as the position will change as the viewport gets smaller.
      /* Smartphones */
@media (max-width: 480px) {
 
}
      
/* Smartphones to Tablets */
@media (min-width: 481px) and (max-width: 767px) {
 
}
      
/* Tablets */
@media (min-width: 768px) and (max-width: 959px) {
 
}
      
/* Desktop */
@media (min-width: 960px) and (max-width: 1199px) {
 
}
      
/* Large Display */
@media (min-width: 1200px) {
 
}
      You also have plenty of other issues too as you are using a responsive template (e.g. menu crashing through logo at smaller display sizes).

      You also appear to be using "progressive caching" - do not use this - instead use "conservative" and clear server cache after changing.

      This is how to create a custom CSS compatible with Gantry 4...

      Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_fracture). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"

      For more information on debugging & customising with LESS/CSS please read this blog post http://www.rockettheme.com/blog/coding/1767-basics-debugging-a-customizing-with-lesscss .

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1062005
    • Sebaca's Avatar
    • Sebaca
    • Elite Rocketeer
    • Posts: 647
    • Thanks: 0

    Re: SOLVED Problem with column submenus

    Posted 11 years 3 months ago
    • Thank you very much MrT! :D
    #1062025
    • Sebaca's Avatar
    • Sebaca
    • Elite Rocketeer
    • Posts: 647
    • Thanks: 0

    Re: SOLVED Problem with column submenus

    Posted 11 years 3 months ago
    • I just noticed that there is a problem. When I pass my mouse over the page below the menu it displays the submenu "our products". While I want my submenu appears only when I pass my mouse over "our products".
      Thank you again for the help.
    #1062312
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Problem with column submenus

    Posted 11 years 3 months ago
    • ok use this modified version of that code....
      ul.gf-menu li.item176:hover .dropdown {
     left: -300px !important;
}

      BUT - you have not put the code in the media queries as I suggested with different values, you just pasted the code followed by all the empty media queries... this isn't correct.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1062321

Time to create page: 0.074 seconds