Home Forums ART WordPress Theme Header Logo & Hover-Underline

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #24578
    Alex_T
    Participant
    Purchased
    Supported

    Hi there,

    first of all, thanks for the theme – I really like it! 🙂

    I’ve got 2 questions:

    1) Is it possible to disable the logo in certain areas on a page with inline css?

    For example: I have a group with ID name #intro on page-id-123. Something like this, but to address the logo within this area:

    .logo-image .page-id-123 #intro {
    display: none;
    }

    2) Is it possible to use the hover-underline effect for all links on the website and only appear when hovering the link? (For example: The clicked link shouldn’t stay underlined after visiting the page, like it does in the menue.)

    I already use this code, so it doesn’t scale:

    .menu-hover-underline1 li.menu-item > a::before {
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    }

    Thanks in advance!

    Greets, alex

    #24581
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,
    Thank you for purchasing our theme 🙂

    1. Do you mean that the logo is placed into a Group? You could add a Single Image module into this Group. It is not possible by CSS codes to add a logo into a Group wrap.
    If you want to hide the default logo(on the header bar) of this page, you could use the custom CSS:

    .page-id-123 .logo-wrap {
        display: none;
    }

    2. We cannot define a general CSS to add the hover effect for ALL linked text. Because it can cause other unpredictable problems.
    For the linked text in the Text module:
    2.1) Please add a class hoverline by the code mode.
    like: <a href="xxx" class="hoverline">Linked Text</a>

    2.2) Please add the custom CSS:

    a.hoverline::before {
    	content: "";
    	position: absolute;
    	bottom: -9px;
    	left: 0;
    	width: 100%;
    	height: 2px;
    	background-color: currentColor;
    	-webkit-transform: scale3d(0, 5, 1);
    	transform: scale3d(0, 5, 1);
    	-webkit-transform-origin: 0% 50%;
    	transform-origin: 0% 50%;
    	-webkit-transition: -webkit-transform 0.3s;
    	transition: transform 0.3s;
    	-webkit-transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
    	transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9);
    }
    a.hoverline:hover::before  {
    	-webkit-transform: scale3d(1, 1, 1);
    	transform: scale3d(1, 1, 1);
    }

    If you want the effect to other place, please list them and better paste URTs also. Thanks.
    PS:
    The custom CSS should be pasted into “Appearance > Customize: Additional CSS” normally.


    Regards!
    SeaTheme – FAQsTwitterFacebook

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!