Home>Support>Last Menu Element Styling with Custom CSS

Last Menu Element Styling with Custom CSS

By Jose AMezcua, 9 years ago. Last reply by Daniel, 9 years ago.

Site Origin Team!
Can’t stress how much I love vantage & page builder! We keep using it on and on.

Anyways, to the point.

We are working on http://iluminadot.com/

and used the following code for the menu hover effect:

/* Vantage Menu UNDERLINE Effect */
.main-navigation ul li:hover > a {
        background: none !important;
  	border-bottom-width: 1px;
        border-bottom-style: solid;
        padding-bottom: 2px;
}

And the following to style the Last Element:

/* Last of type*/
.main-navigation ul li:last-of-type {
    margin-left:40px;
    margin-right:40px;
    background: #333333;
}

.main-navigation ul ul li:last-of-type:hover > a {
    border: none !important;
}

With that last line we tried to remove the hover effect from that last menu element but could not pull it off,
any suggestions?

(That last menu is a link to an E-Store that is why we keep highlighting it )

Thanks in advance for the great and constant support,
Cheers from mexico,
J.

URL: http://iluminadot.com/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 5 months ago Magus
    Hi, I Work Here

    Hi Jose

    Your last CSS Snippet has an error, too many tags to target your required Menu list. Your CSS should be

    .main-navigation ul li:last-of-type:hover > a {
        border: none !important;
    }
    

    Let us know how you get on

    Magus

  2. 9 years, 5 months ago Jose AMezcua

    Hey @Magus,

    worked smoothly, check it out: http://iluminadot.com/

    Any idea how can I get rid of the background reduction effect when you hover over that last menu element?

    Thanks,
    J

  3. 9 years, 5 months ago Magus
    Hi, I Work Here

    Hi Jose

    You can add the following property to the rule we just corrected

    padding-bottom: 30px !important;
    

    This will override the 2px padding you added to the hover in your first code snippet.

    Magus

  4. 9 years, 5 months ago Jose AMezcua

    Pure magic mr.Magus,

    thank you very much.
    J

  5. 9 years, 5 months ago Magus
    Hi, I Work Here

    Hi Jose

    No problem, glad to help

    Please feel free to start a new thread if you need any more help.

    Magus

  6. 9 years, 5 months ago Daniel
    Hi, I Work Here

    Hi Jose

    Am glad you making progress in developing your site.

    @Magus much appreciated :-)

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More