CSS id does not work in header

  • Resolved merlin1555

    (@merlin1555)


    4 years, 11 months ago

    Hello everyone,

    I am new to WordPress development and am currently in the process of creating my first theme.
    My problem is that the CSS settings are not shown in my header when I use an ID. If I change the elements in my CSS not by the ID but by their name (e.g. section), it works. In the rest of my document the CSS settings for ID’s are shown, only not in the header.

    For example, if I use ‘header section’ instead of #headerNav, the changes will implemented.

    header.php:

    <!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title></title>
    <?php wp_head();?>
  </head>
  <body>
    <section id="myGrid">
      <header>
          <section id="navHeader">
              <h1><a href="#"></a></h1>
              <nav>
                <?php wp_nav_menu(
                  array(
                    'theme_location' => 'top-menu',
                    'menu_class' => 'navigation'
                  )
                );?>
              </nav>
          </section>
          <section id="navMain">
              <h2><?php the_title();?></h2>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, deleniti eos quis nam ratione facilis blanditiis porro nesciunt recusandae, magni quasi molestias magnam temporibus explicabo unde natus dolor hic deserunt!</p>
              <section id="navMainButton">
                  <button>First Button</button>
                  <button>Second Button</button>
              </section>
          </section>
      </header>

    style.css:

    body{
    margin: 0;
    padding: 0;
    font-family: Calibri;
    background: rgb(234,239,240);
    color: rgb(6,39,60);
}

header{
    color: rgb(250,250,250);
    background: rgb(6,39,60);
    height: 600px;
    z-index: 200;
    position: relative;
}

#headerNav{
    position: fixed;
    width: 100%;
    background: rgb(6,39,60);
    box-shadow: 0px 1px 5px rgb(6, 21, 60);
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 50% 50%;
}
    • This topic was modified 4 years, 11 months ago by Jan Dembowski.
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘CSS id does not work in header’ is closed to new replies.