Hey Guys,
First time poster. I can’t style a WordPress header to save my life. I do a lot of local businesses, and it’s imperative the CTA be bold, and in the header. Every theme I’ve ever come across sneaks a tiny CTA in the very top. To me, it’s poor design.
So, that leads me to here! Here’s what I have(used twenty seventeen child theme).
I’ve been bouncing between HTML, CSS, and JavaScript since February and I’m pulling my hair out…
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<?php get_template_part( 'template-parts/header/header', 'image' ); ?>
<?php if ( has_nav_menu( 'top' ) ) : ?>
<div class="navigation-top">
<div class="wrap">
<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
</div><!-- .wrap -->
</div><!-- .navigation-top -->
<?php endif; ?>
</header><!-- #masthead -->
<?php
/*
* If a regular post or page, and not the front page, show the featured image.
* Using get_queried_object_id() here since the $post global may not be set before a call to the_post().
*/
if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) :
echo '<div class="single-featured-image-header">';
echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );
echo '</div><!-- .single-featured-image-header -->';
endif;
?>
<div class="site-content-contain">
<div id="content" class="site-content">
/*
Theme Name: Twenty Seventeen Child Theme
Theme URI: http://prizmsocial.com/
Description: A contractor theme for WordPress
Author: Tom Beckerle
Author URI: http://prizmsocial.com/
Template: twentyseventeen
Version: 1.0.0
*/
/* Add Custom CSS after this line */
/* Header info */
@media screen and (min-width: 48em) {
.custom-logo-link img {
max-width: 700px;
}
}
.custom-logo-link img {
/* display: inline-block; */
max-height: 160px;
/* width: auto; */
}
.site-branding {
padding: 1em 0;
position: relative;
-webkit-transition: margin-bottom 10px;
transition: margin-bottom 10px;
z-index: 3;
margin-bottom: -15px !important;
}
.main-navigation {
clear: both;
display: block;
position:relative;
margin:0;
-webkit-transform:translateZ(0);
height: 25px;
}
.navigation-top {
background: linear-gradient(#842122, #BD3535);
bottom: 0;
font-size: 24px;
font-size: 1.5rem;
left: 0;
position: absolute;
right: 0;
width: 100%;
z-index: 3;
}