Support » Theme: Twenty Twenty » Transition issue with Skip-link

  • Anonymous User 17836910

    (@anonymized-17836910)


    Hello.

    I am trying to introduce a transition to the Skip Link in the theme when it is focused and defocused.

    I was able to add it when you press tab and focus it, however, after being pressed enter or another key, dissapears without doing the transition.

    If I change the position from absolute to relative, the transition works well but adds an extra line above the header.

    The code I used on the website:

    a, a:active, a:hover, a:focus,
    path, path:active, path:hover, path:focus {
    	transition: all 0.375s ease;
    }
    
    .screen-reader-text {
    	border: 0;
    	clip: rect(1px, 1px, 1px, 1px);
    	-webkit-clip-path: inset(50%);
    	clip-path: inset(50%);
    	height: 1px;
    	margin: -1px;
    	width: 1px;
    	overflow: hidden;
    	padding: 0;
    	position: absolute;
    	word-wrap: normal;
    	word-break: normal;
    }
    
    .screen-reader-text:focus {
    	background-color: #0099cc;
    	border-radius: 3px;
    	box-shadow: 0 0 2px 2px #fff;
    	clip: auto;
    	-webkit-clip-path: none;
    	clip-path: none;
    	display: block;
    	font-size: 1.5rem;
    	font-weight: 700;
    	height: auto;
    	right: 5px;
    	line-height: normal;
    	padding: 15px 23px 14px;
    	text-decoration: none;
    	top: 5px;
    	width: auto;
    	z-index: 100000;
    }
    
    /* Skip Link --------------------------------- */
    
    .skip-link {
    	text-decoration: none;
    	font-weight: 700;
    	font-size: 1.5rem;
    	height: auto;
    	width: auto;
    	color: #000;
    	background-color: #0099cc;
    	border-radius: 3px;
    	box-shadow: 0 0 2px 2px #fff;
    	-webkit-clip-path: none;
    	clip-path: none;
    	left: -200px;
    	top: 5rem;
    	padding: 15px 23px 14px;
    	position: absolute;
    	z-index: 10000;
    	line-height: normal;
    }
    
    .skip-link:focus {
    	left: 5%;
    	top: 5rem;
    	z-index: 5000;
    	right: auto;
    	display: inline;
    }

    I am not sure at all if this is a problem related to Twenty Twenty.

    Do you have a moment?

    Thanks

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

  • The topic ‘Transition issue with Skip-link’ is closed to new replies.