Nav menu slanted block effects

  • lisakaye

    (@lisakaye)


    7 years ago

    Using CSS, I’ve applied slanted background block effects to certain links on my nav menu… but unfortunately the text becomes slanted as well! Any ideas on how to get the text to stand up straight?

    CSS for the gray “login” block is as follows:

    .login-link {
padding-top: 8px !important;
padding-bottom: 22px !important;
padding-left: 10px !important;
padding-right: 10px !important;
height: 30px;
background: #666666;
transform: skewX(-30deg);
-webkit-transform-origin: 0 0 !important;
}

    p.s. Site is under dev on a restricted subdomain so I’ve just uploaded a screenshot of what it looks like.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Justin

    (@click245)

    Hi Lisa, not sure if this will work since I can’t see your site’s source, but if you are skewing a parent element negatively, maybe you could just skew the text inside positively?

    Otherwise you could look at using the clip-path property, something like this:

    .login-link {
    -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

    Hope that helps!

    Denzel Chia

    (@denzel_chia)

    Hi,

    In WordPress, each menu item has an unique css #id selector. Use that in your css code instead of a class selector.

    Thank you

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Nav menu slanted block effects’ is closed to new replies.