0
Welcome Guest! Login
0 items Join Now

SOLVED Special and partial border on G5 Menu (active/hover)

Last Post
Search Topic

  • SOLVED Special and partial border on G5 Menu (active/hover)

    Posted 9 years 8 months ago
    #1227923
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Special and partial border on G5 Menu (active/hover)

    Posted 9 years 8 months ago
    • 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.

      Use this code...
      nav.g-main-nav ul.g-toplevel li.active, nav.g-main-nav ul.g-toplevel li:hover {
    border-bottom: 3px solid red !important;
}

      I didn't think 1px was big enough...

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

  • Re: SOLVED Special and partial border on G5 Menu (active/hover)

    Posted 9 years 8 months ago
    • I know how to use FF inspector ;-) thanks
      See the image : I must have a white part on the left and on the right of this bottom border !
      MrT wrote:
      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.

      Use this code...
      nav.g-main-nav ul.g-toplevel li.active, nav.g-main-nav ul.g-toplevel li:hover {
    border-bottom: 3px solid red !important;
}

      I didn't think 1px was big enough...

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

  • Re: SOLVED Special and partial border on G5 Menu (active/hover)

    Posted 9 years 8 months ago
    • I found this example to make it... Now I have to do the same in my G5 top menu :(
      <html>
<head>
    <style>
        .mainDiv {
            width: 200px;
            height: 50px;
            border-bottom: 5px solid red;
            border-left: 5px solid green;
            border-right: 5px solid green;
            position: relative;
        }
 
        .mainDiv:after {
            content: '';
            display: block;
            position: absolute;
            width: 100px;
            right: -6em;
            bottom: -5px;
            border-bottom: 5px solid white;
        }
        .mainDiv:before {
            content: '';
            display: block;
            position: absolute;
            width: 100px;
            left: -6em;
            bottom: -5px;
            border-bottom: 5px solid white;
        }
    </style>
</head>
<body>
<div class="mainDiv"></div>
</body>
</html>
    #1227930
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Special and partial border on G5 Menu (active/hover)

    Posted 9 years 8 months ago
    • Ok, well I worked this out using firebug...
      nav.g-main-nav ul.g-toplevel li.active:after, nav.g-main-nav ul.g-toplevel li:hover:after {
  content: "";
  border-bottom: 3px solid red !important;
  left: 10%;
  right: 10%;
  width: 80% ;
  bottom: 0px;
  position: absolute;
}

      Regards, Mark.

    • The following users have thanked you: Laurent BRIERE

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

  • Re: SOLVED Special and partial border on G5 Menu (active/hover)

    Posted 9 years 8 months ago
    • 2 hours that I am searching for and you find the solution in 3mn !
      You're the best MrT (y) !!
    #1227936

Time to create page: 0.070 seconds