0
Welcome Guest! Login
0 items Join Now

Styling navigation bar (Helium template)

Last Post
Search Topic

  • Styling navigation bar (Helium template)

    Posted 4 years 2 months ago
    • Website: nieuw.megiq.com/
      I want to style the navigation bar as shown below in the image.
      1. I want to make the active menu item red and a red line below the text. How can I do that?
      2. If you move the mouse over a non-active menu item, it must also turn red and a red line below it. How can I do that?


      This image is hidden for guests.
      Please log in or register to see it.
    #1422029
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Styling navigation bar (Helium template)

    Posted 4 years 2 months ago
    • I've moved this topic from Vermilion forum to Gantry 5 for Joomla forum as you are using Helium template.

      When developing web sites it is useful to learn to use either, the Inspector in Firefox, Chrome Developer Tools in Chrome, or one of the other browser developer tools, they will save you hours on things like this and they're very easy to use.


      Use this code...
      .g-main-nav .g-toplevel li.active .g-menu-item-container, .g-main-nav .g-toplevel li:hover > .g-menu-item-container {
  border-bottom: 4px solid red;
}

.g-main-nav .g-toplevel li.active .g-menu-item-container .g-menu-item-title, .g-main-nav .g-toplevel li:hover > .g-menu-item-container .g-menu-item-title {
  color: red;
}

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

  • Re: Styling navigation bar (Helium template)

    Posted 4 years 2 months ago
    • Thank you Mark.

      However, it is not quite as I would like it to be.
      On the print screen you will see the active (red) main menu item near 1. However, when I hover over the active main menu item with the mouse, all submenus also immediately turn red. So the numbers 2, 3 and 4. However, they must remain blue and only become red when you move the mouse over them.
      And the red line should only be under the main menu item, not under the submenu items.
      How can I do that?

      I tried it with Firebug, but I still can't figure it out.

      This image is hidden for guests.
      Please log in or register to see it.
    • Last Edit: 4 years 2 months ago by Maurice Lehr.
    #1422076
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: Styling navigation bar (Helium template)

    Posted 4 years 2 months ago
    • It just needs a slight tweak, replace what I gave you with this...
      .g-main-nav .g-toplevel li.active > .g-menu-item-container, .g-main-nav .g-toplevel li:hover > .g-menu-item-container {
  border-bottom: 3px solid #e30134;
}
.g-main-nav .g-toplevel li.active > .g-menu-item-container .g-menu-item-title, .g-main-nav .g-toplevel li:hover > .g-menu-item-container .g-menu-item-title {
  color: #e30134;
}

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

Time to create page: 0.042 seconds