Header Logo & Hover-Underline

[Alex_T]

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

[SeaTheme]

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 – FAQs – Twitter – Facebook

[Author]

Posts