Issue with Nav Styles

Migrating a site form plain plain php to Shapely, and just having some trouble getting them to behave 1:1.

Prefer to send sites via PM, but I have both live for comparison.

The primary issue is the nav links - I have a tilted parallelogram hover effect on the items (using transform: skew) that doesn’t behave as expected in Shapely when hovering:

(1) there’s a 2nd color on the right edge using the :after pseudo-class, but when hovering over that the font color switches to default (black) even though the hover color on the and the :after elements is set to white !important.
(2) when hovering over the lower-left long corner of the parallelogram, the font also goes to black.
(3) when entering or leaving the hover, the box is first rectangle, then transitions to skewed instead of going straight to skewed.

Each of these behaves as expected in my non-WP/Shapely version.

Thanks!

Hi there

Hope you are having a good day and thank you for your question :slight_smile:
Please provide link to the page and screenshot of the problem

Thanks!
Colorlib Support Team

Shapely site is here:
https://topdev.dempseyitservices.com

Custom site to compare to is here:
https://toplaunchdev.dempseyitservices.com

Good evening

Sorry phi11yguy19 but this is clearly customization related question, we support native theme functions, if you implement third-party codes or styles in this case you have to handle them yourself, I can help you when talking is about small changes but from what I see this is not a small task and requires time

Sorry, but this is a native question. Something in your native css/js is preventing standard behavior from happening, and I’m asking for help identifying what I need to override/disable to get the desired effect. It should not be a major task.

The css below is the full extent of what’s needed to get the desired effect with clean bootstrap, and the code below that is what we’ve done to apply it to shapely. Only the 3 items in the original post remain to be identified. If you could just point to the css that’s challenging us in shapely, we can take if from there.

Bootstrap:

.navbar {
    padding-top: 10px;
    padding-bottom: 0;
}
nav a.navbar-brand {
    background: url('image/logo-white.png') no-repeat top left; background-size: contain;
    display: block; width: 180px; height: 30px;
    text-indent: -9999px; /* hides the link text */
}
nav li:not(.navbar-brand):hover, nav li:not(.navbar-brand):active, nav .active li:not(.navbar-brand) {
    height: 100%; transform: skew(-8deg); background: #272C6E; color: white !important;
    margin-top: -10px; padding-top: 10px;
}
nav li:not(.navbar-brand):hover::after, nav li:not(.navbar-brand):active::after, nav .active li:not(.navbar-brand)::after {
    height: 100%; background: #4B9BAC; width:4px; content: ""; 
    position: absolute; top: 0; right: 0px;
}
nav a:not(.navbar-brand):hover, nav a:not(.navbar-brand):active, nav .active a:not(.navbar-brand) {
    transform: skew(8deg); color: white !important;
}
nav a:not(.navbar-brand) {
    color: black !important; text-transform: uppercase;
}

Shapely


nav#site-navigation {
  background: transparent;
  border: none;
  padding: 0;
}
nav#site-navigation a {
  font-size: 1.15em;
  letter-spacing: normal;
  padding: 4px 10px 0 4px;
}
nav li:not(.custom-logo-link):hover, nav li:not(.custom-logo-link):active, nav .active li:not(.custom-logo-link) {
  height: 100%; transform: skew(-8deg); background: #272C6E; color: white !important;
  /*margin-top: -10px; padding-top: 10px;*/
}
nav li:not(.custom-logo-link):hover::after, nav li:not(.custom-logo-link):active::after, nav .active li:not(.custom-logo-link)::after {
  height: 100%; background: #4B9BAC; width:4px; content: ""; 
  position: absolute; top: 0; right: 0px;
  color: white !important;
}
nav a:not(.custom-logo-link):hover, nav a:not(.custom-logo-link):active, nav .active a:not(.custom-logo-link) {
  transform: skew(8deg); 
  color: white !important;
}
nav a:not(.custom-logo-link) {
  color: black !important; 
  text-transform: uppercase;
}

Good morning

Dear Phi

when you implement third-party code, plugin or script and it’s not working this is not theme related problem and such problems are not supported by use, you can check this in our support policies, such problems needs more attention to check the problem and fix them some it easier to create new function instead of digging in someone else created code

problem i spotted right now is hover issue on the right border and this can be fixed by this code:

nav li:not(.custom-logo-link):hover a {
color: white !important;
}

What 3rd party plug in are you referring to? This is (can be) handled right through additional css menu built into the theme in the admin console.

Good evening

Dear, I have also mentioned code along with the plugin :slight_smile: if you implement anything that is not native for the theme and this piece of code is not compatible with the theme it up to you to fix it, as I said before I can help (I wish we have enough time to handle all similar questions) only with minor tweaks

quite disappointing…if someone wants to have some simple menu styling that you didn’t think of, and your css and/or js affects styling that would otherwise work in a clean bootstrap site, then you tell your users tough, figure it out, or go find another theme.

guess i’ll be looking for another theme

Good morning

Dear, sorry but every theme support has the absolute same support policies, if you want to implement something specific in your theme you have to do this yourself, even in premium support theme authors does not support implementing third-party codes in the theme
Of course, you can change theme which is no solution because you will have a similar or different problem in any theme, without attracting professional here you can’t fix this problem

Really?! There’s no third party here… I’m the first party, you’re the second. You’re saying if we use your themes we can’t apply ANY of our own css to make it match a client’s spec? Outstanding

Good morning

Is this really hard to get? where i said this? :slight_smile:
You can implement anything in the theme but you have to do this yourself, implementation of the third party codes is not supported, its impossible to provide support for customization

p.s. - We are the first party, plugins, scripts, and codes we are using officially in our themes are the second party and anything else is the third party

Smh, it’s got all right. Congrats on the excellent customer service.

Thank you for understanding, i will close this case here if you have any question related to the theme i will be happy to assist you