0
Welcome Guest! Login
0 items Join Now

Fine tuning menu

Last Post
Search Topic

  • Fine tuning menu

    Posted 12 years 3 weeks ago
    • Hi all,

      I use the Default Gantry Template for Joomla and did some customisations.

      Here is what I've got so far: dev.it4oz.com.au/oppys/
      My questions are - all about the top menu:
      • 1. How do I get rid off the 1 white pixel above the green menu item dividers?
      • 2. How do I get rid off the white pixels below the green menu items while hovering?
      • 3. How can I get the same style for the "active" button as "hover"?
      • 4. When hovering a menu item, one of the dividers is gone - I think - making the whole menu move to the left and the text up by one pixel. How can I solve this - divider has to stay?

      I'm using a menu-custom.less file, but everything I change doesn't have any effect. Not even after cleaning cache.

      Thanks a lot!
    • Last Edit: 12 years 3 weeks ago by TheCrazyWombat.
    #956764
    • Who?'s Avatar
    • Who?
    • Preeminent Rocketeer
    • Posts: 25562
    • Thanks: 613
    • Joomla freelancer

    Re: Fine tuning menu

    Posted 12 years 3 weeks ago
    • Add this to your custom css file
      .gf-menu li {
border-top: 0px !important;
}
 
.gf-menu.l1 > li.active > .item {
color: white !important;
}
 
.gf-menu li:hover, .gf-menu li.active:hover {
border-right: 1px solid #669933 !important;
}

      This is how you create a custom CSS file...
      www.gantry-framework.org/documentation/j...-a-custom-stylesheet

      When we release upgrades template files will change and you will have to reapply all your changes again (that's if you can remember where they all are). If you keep your changes in a separate Custom CSS file you'll have no issues upgrading.
    • Check my services at: Mihha-Vision
    #956777

  • Re: Fine tuning menu

    Posted 12 years 3 weeks ago
    • Hi Igor,

      I ended up adding this to gantry-custom.css
       
.gf-menu.l1 > li.active > .item {
color: white !important;
border-right: 2px solid #669933 !important;
}
 
.gf-menu li:hover, .gf-menu li.active:hover {
border-right: 2px solid #669933 !important;
border-bottom:1px solid #669933 !important;
}

      and added this line to my case menu-custom.less
       
 
     // Default items
     li {
          float: left;
          display: block;
          text-align: center;
          position: relative;
          padding: 0;
          padding: 0 8px; // IT4OZ
          /*border: none;
          border: 1px solid transparent;*/
          border-right: 1px solid @menuActiveTextColor; // IT4OZ
          border-top: 0px !important; // IT4OZ <- THIS LINE HERE
     }
 
 

      One minor thing is left now. When you hover one of the menu items, active or not, the text jumps a pixel to the left. Can't find what it is with the element inspector in FireFox, because when I move my mouse away from the button to scroll trough the css, it changes to the css for a inactive item. :O(

      When I'm finished designing the template, I will remove all the excess css/less in menu-custom.less. Only the lines within { and } with // IT4OZ will stay.

      If this doesn't make any sense, please let me know. Trying to work out the best way for me to modify the default Gantry Template.
    #957244
    • Who?'s Avatar
    • Who?
    • Preeminent Rocketeer
    • Posts: 25562
    • Thanks: 613
    • Joomla freelancer

    Re: Fine tuning menu

    Posted 12 years 3 weeks ago
    • Add this to your custom css file
      .gf-menu li.active {
border-right: 2px solid #669933 !important;
}
    • Check my services at: Mihha-Vision
    #957283

Time to create page: 0.053 seconds