Empty space below menu button

  • Resolved lotlog

    (@lotlog)


    9 years, 9 months ago

    Hi there,
    I’m using the Isola theme. While I tend to click the menu button, there is a empty transparent space under the menu button.
    While I check the code, it’s like below
    <span class="screen-reader-text">Primary Menu</span>

    Then I try to hide it with child theme.

    .screen-reader-text {
	display: none;
}
.screen-reader-text:focus {
	display: none;
}

    But it doesn’t work.

    1. What’s this for?
    2. How can I hide it?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Suyogya Shukla

    (@themeislesupport)

    9 years, 9 months ago

    Hey there,

    Please post a link to your site. Thanks!

    Thread Starter lotlog

    (@lotlog)

    9 years, 9 months ago

    Hi there,
    Site: https://herdgo.at/
    And here is the situation: https://herdgo.at/wp-content/uploads/space.png

    Siobhan

    (@siobhyb)

    9 years, 9 months ago

    Hi there!

    I was able to replicate on my own installation of Isola and have created a screenshot. Can you take a look and confirm if the highlighted area is what you were referring to?

    Isola

    I’ve reported back to the team behind this theme, also, and will let you know what I hear from them.

    Thread Starter lotlog

    (@lotlog)

    9 years, 9 months ago

    Hi Siobhan,
    That’s exactly what I met.
    I tried to fix it on child theme. But it made no difference.
    And I searched a lot, it seems related to something called ‘screen-text’ feature for visual impairment people.
    Since you’ve already reported it back, I will wait for the reply.

    Thanks.

    Siobhan

    (@siobhyb)

    9 years, 9 months ago

    Ah, well spotted! I tested and got around this by adding the following to my custom CSS:

    .screen-reader-text {
    clip: inherit;
    position: absolute !important;
    top: -999999px;
    left: -999999px;
}

    The above snippet pushes the element off screen, so it can still be read by screen readers but won’t appear as an outline in any way.

    To add custom CSS, firstly set up a child theme or activate a custom CSS plugin. If you have Jetpack active then you can enable its custom CSS module too.

    Let me know how you get on with that and I’ll let you know what I hear from the team too.

    Thread Starter lotlog

    (@lotlog)

    9 years, 9 months ago

    WOW! IT WORKS!
    Thanks a lot!

    Another quiz:
    Should I use
    @import url("../isola/style.css");
    on style.css?

    Or use function.php at child theme instead?

    Since the official guide https://codex.wordpress.org/Child_Themes said
    function.php

    @import: this is no longer best practice

    Siobhan

    (@siobhyb)

    9 years, 9 months ago

    Hi @lotlog,

    I’m glad that custom CSS worked out for you!

    I recommend following the guidance in the Codex and importing your parent theme’s style.css file via the child theme’s functions.php file.

    Thread Starter lotlog

    (@lotlog)

    9 years, 9 months ago

    When I tried to remove @import from style.css, and copy functions.php template from https://codex.wordpress.org/Child_Themes Everything on homepage disappear.
    Perhaps something that should be changed in that template.

    It seems a little bit over demand, but I know little about PHP.
    If you have some free time, would you mind post a functions.php template for Isola theme?

    Siobhan

    (@siobhyb)

    9 years, 9 months ago

    Hi @lotlog,

    The template from the Codex is generic and doesn’t need to be tweaked to work with specific themes. Could you try copying and pasting the following again? 

    <?php

add_action( 'wp_enqueue_scripts', 'my_child_enqueue_styles' );
  function my_child_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

    Please note that you don’t need to add an ending ?> to the php.

    Let me know how you get on with that! If your child theme is still not working after the second attempt, let me know and will do some more troubleshooting.

    Thread Starter lotlog

    (@lotlog)

    9 years, 9 months ago

    WOW! It works AGAIN!
    You are the greatest engineer ever!!!

    I think I failed to make it because I put ?> at the end of functions.php

    Thank you!!!

    Siobhan

    (@siobhyb)

    9 years, 9 months ago

    Yay, I’m happy to hear you got it working! 🙂 You know where to find us if anything else comes up, too.

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

The topic ‘Empty space below menu button’ is closed to new replies.