Remove shadow underline on logo rollover

  • Resolved brmstudio

    (@brmstudio)


    8 years, 6 months ago

    Hello – I have modified some of the code (removed the search bar, fiddled with the width of the header and position of the menus, changed the fonts) but not done anything too drastic. On my main page, my logo in the header doesn’t link to anywhere, but on secondary pages (My About page, for example) the logo becomes a link back to the home page and when it is rolled over a shadow underline appears under it. Presumably this is because it is a link, and I’d like to keep it linking back to the homepage, but have fiddled about with every bit of code I think pertains to the header and/or logo and can’t remove the shadow – any help?

Viewing 5 replies - 1 through 5 (of 5 total)

  • Link to site?

    You need to add custom css to change the link rules. If you right click on the logo and select “Inspect Element” It will show you the css that needs to be changed.

    Without a link to your site there is nothing more I can offer.

    Thread Starter brmstudio

    (@brmstudio)

    The site isn’t live yet so I can’t link. Tried inspecting element but the specific CSS isn’t clear? None of the other linked images I’ve so far added have shadows underneath them, just the header/logo image – i know which Selector refers to this in the CSS but no amount of ‘no border’ or ‘no shadow’ code removes the thing!

    Thread Starter brmstudio

    (@brmstudio)

    Oh I lie, it is also affecting other image links! (I have some in my footer – my custom social menu also hops about when moused over…)

    Thread Starter brmstudio

    (@brmstudio)

    I’ve figured this one out! Lots of transitions in this theme… Social links still jumping about but I imagine that’s the same sort of thing.

    Hi,

    The theme applies the box shadow on linked images when mouse hover over them. You can remove this using a custom CSS:

    /* Removes the behavior from the whole website: */
a img:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* Removes the behavior in header only: */
.site-header a img:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}

    Also, please note that you should never edit the theme source files. You will loose all your changes once you update the theme. If you are modifying the theme, please use a child theme.

    You may also find some answers to your questions at https://support.webmandesign.eu/forums/forum/auberge/support forum

    Regards,

    Oliver

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Remove shadow underline on logo rollover’ is closed to new replies.