Adding Content to Pre-Existing Web Page [closed]

I have taken on a small web design project for a friend, and they’re asking me to add something that I think is pretty simple but I can’t quite figure it out. For context, I haven’t managed a web page since pre-CSS days, so I know HTML pretty well, but get pretty mixed up with CSS and PHP.

As it is now, the site has two buttons in the header. They’d like me to add a third button that appears above the other two. I have found the HTML for the two existing buttons, but copy/pasting one of them did not add a third button but instead replaced the lower button with the text and link I inserted.

Here’s a snippet of the PHP file:

    <?php wp_nav_menu(array('theme_location'=>'menu-1','container'=>'div','container_id'=>'nav','container_class'=>false,'menu_class'=>false,'menu_id'=>false )); ?>
    <div id="logo"></div>
    <h2><a href="<?php echo home_url(); ?>" title="<?php echo esc_attr( get_bloginfo( 'description', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h2>
    <h3><a href="<?php echo home_url(); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'description' ); ?></a></h3>
<a href="https://islandconsultingandtraining.com/wp-content/uploads/2020/10/ICT-Training-Schedule-2020-2021.pdf" target="_blank" class="pdf">ICT Schedule:<br>2020/2021</a>
<a href="/docs/ICT Course Catalog 2020-2021-For Education and Social Services Professionals.pdf" target="_blank" class="pdf">ICT Catalog:<br>Educators and Social Services</a>
<a href="/docs/ICT-Course Catalog-2020-2021.pdf" target="_blank" class="pdf">ICT Catalog:<br>Law Enforcement</a>
</div>

As you can see I put in the third hyperlink, but I know I’m missing something, probably in the CSS, to actually put it above the other buttons.

Site as it looks now

Answer

There’s a lot going on in that code and even more some things that some people (myself included) would consider a bad practice, namely absolutely positioning thing. I won’t say it is wrong, and I definitely use it, but I try to do so sparingly.

If you add the HTML exactly as you did, you need to make the following changes to the CSS:

#header .pdf {
    bottom: 0; /* was 55px */
}
#header .pdf:nth-of-type(2) {
    bottom: 100px; /* was 55px */
}
/* This block is new */
#header .pdf:nth-of-type(3) {
    bottom: 50px;
}

That’s going to mess up responsive a bit, so you’ll also have to tweak this:

@media only screen and (max-width: 767px) {
    #header a.pdf {
        bottom: 0; /* was initial */
    }
}

You can change those numbers around to move things differently.

As to which file to edit, that is a little hard to say. There is either a file in the root of the WordPress install (where wp-config.php lives) called “island.css”, or it lives somewhere in the “/wp-content/themes/THEME_NAME/” directory, but that is a little hard to tell.