Set a link in child theme style.css to jump to #main

I have created a 2013 child theme by creating these 2 files –


@import url("../twentythirteen/style.css");

.site-header .home-link {
    min-height: 800px;



function my_custom_header_setup() {
        $args = array('height' => 800);
        add_theme_support('custom-header', $args);

add_action('after_setup_theme', 'my_custom_header_setup');


Now the website has a large image at the top and looks as I wanted it.

However, when users click at the large image, then “nothing happens” for them.

I would like to change it, so that the click at the large image causes scroll down to the #main anchor:


Is such a change please possible through the style.css? I have searched and couldn’t find a CSS solution (or hack) for that.

If not, then how to achieve this in the most simple way? (I am trying to keep the child theme small for easier site updates).

My workaround for now is to disable the link with CSS, but I am still interested in a better solution:

.site-header .home-link {
       pointer-events: none;
       cursor: default;

Solutions Collecting From Web of "Set a link in child theme style.css to jump to #main"

The simple answer is NO, You can not! CSS stand for Cascade Style Sheet which mean to style elements in cascade order. CSS can not change the DOM.

There are two ways to achieve it.

  1. Overriding header.php
  2. Using JavaScript or jQuery (Not recommended)

Method 1: Copy the header.php to your child theme and modify href link with what you want!

<a class="home-link" href="#main" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
    <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

Method 2: Personally I will not recommend it. It is better to have less js as much as possible. If you want to go with this solution you can ask this to