0
Welcome Guest! Login
0 items Join Now

SOLVED How to style active link in main and submenu

Last Post
Search Topic

  • SOLVED How to style active link in main and submenu

    Posted 8 years 6 months ago
    • Hi, now I have another little problem.

      I cannot figure out how to style the active menu links in my main menu or in my submenus.

      Any help would be greatly appreciated.

      BTW: How can I bring down the mainmenu so that it doesn't take up so much space over the header image?

      The testpage can be found here: http://midas-it.de/ipsjoomla/

      Thank you and best regards,

      Michael
    • Last Edit: 8 years 6 months ago by Michael D'Avis.
    #1237281
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED How to style active link in main and submenu

    Posted 8 years 6 months ago
    • Use this code...
      #g-header .g-main-nav .g-toplevel > li.active:not(.g-menu-item-type-particle):not(.g-menu-item-type-module) > .g-menu-item-container {
    background-color: yellow;
    color: pink;
}
      To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .

      Remember to recompile CSS from base outline too.

      Learn to use either, Firebug in Firefox, or Chrome Developer Tools in Chrome, they will save you hours on things like this and they're very easy to use.

      On those particle add block variations e.g. (no margin, no padding, flush) whatever suits your needs.

      Also, I note the negative margins you are adding in your existing custom CSS - I wouldn't do that because it might not be right in all viewports - better to use the block variations.

      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.
    #1237292

  • Re: SOLVED How to style active link in main and submenu

    Posted 8 years 6 months ago
    • Thanks again for your quick support.

      Now I managed to style the active menu link in my main menu.
      But I cannot find the correct identifier for the two submenus.

      I guess I have to fiddle around with the block variations. Haven't used them not really until now.
      Have to check if I can get rid of my negativ margins using them.

      Using the block variations can I shift my main menu down a little bit?

      Best regards, Michael
    #1237304
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED How to style active link in main and submenu

    Posted 8 years 6 months ago
    • Use this code...
      #g-header .g-main-nav .g-sublevel > li.active > .g-menu-item-container {
    color: red;
}

      You're only putting a negative margin because you other items have too much margin by default. If you used the "no margin" and/or "nopadding" block variation on those then you wouldn't need to do that at all.

      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.
    #1237307

  • Re: SOLVED How to style active link in main and submenu

    Posted 8 years 6 months ago
    • Hi Mark,

      I have eliminated all negative margins in my css by using the 'no margin' and/or 'no padding' block variations you mentioned earlier.

      But I am not able to bring my main menu even further down :-(

      Best regards,
      Michael
    • Last Edit: 8 years 6 months ago by Michael D'Avis. Reason: Typo!
    #1237579
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED How to style active link in main and submenu

    Posted 8 years 6 months ago
    • Use this code...
      .g-main-nav {
    margin-top: 55px;
    margin-bottom: 0;
}
section#g-showcase {
    padding: 0;
}
      To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .

      Remember to recompile CSS from base outline too.

      Regards, Mark.

    • The following users have thanked you: Michael D'Avis

    • 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.
    #1237603

  • Re: SOLVED How to style active link in main and submenu

    Posted 8 years 6 months ago
    • Hi Mark,

      that looks very good :-)

      Thank you.

      Just two more questions on my list ;-)

      Best regards, Michael
    #1237799

Time to create page: 0.051 seconds