Title: _S Header
Last modified: August 21, 2016

---

# _S Header

 *  Resolved [Joshua Sommer](https://wordpress.org/support/users/beanbagg/)
 * (@beanbagg)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/_s-header/)
 * [http://potionbear.com/](http://potionbear.com/)
 * I’d like to achieve this:
 * [clicky](http://potionbear.com/downloads/potionbear.jpg)

Viewing 15 replies - 1 through 15 (of 23 total)

1 [2](https://wordpress.org/support/topic/_s-header/page/2/?output_format=md) [→](https://wordpress.org/support/topic/_s-header/page/2/?output_format=md)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 1 month ago](https://wordpress.org/support/topic/_s-header/#post-3741900)
 * What CSS have you tried so far?
 *  Thread Starter [Joshua Sommer](https://wordpress.org/support/users/beanbagg/)
 * (@beanbagg)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/_s-header/#post-3741901)
 * A centered menu with good spacing and a logo image. :]
 *  Thread Starter [Joshua Sommer](https://wordpress.org/support/users/beanbagg/)
 * (@beanbagg)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/_s-header/#post-3741902)
 * HTML:
 * <div class=”header”>menu code in header.php</div>
 * CSS:
 * .header {
    position: fixed; width: 100%; height: 40px; background: #333; font-
   family: Calibri, Candara, Segoe, “Segoe UI”, Optima, Arial, sans-serif; }
 * I’m using the _s theme.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 1 month ago](https://wordpress.org/support/topic/_s-header/#post-3741903)
 * You don’t have a HTML element with the class “header”. You should know your HTML
   structure, you find this out by right clicking on your webpage and selecting ‘
   view source’.
 *  Thread Starter [Joshua Sommer](https://wordpress.org/support/users/beanbagg/)
 * (@beanbagg)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/_s-header/#post-3741904)
 * I don’t follow. I’ll post the CSS and HTML in its entirety.
 * HTML(header.php)
 *     ```
       <?php
       /**
        * The Header for our theme.
        *
        * Displays all of the <head> section and everything up till <div id="main">
        *
        * @package beanbag
        */
       ?><!DOCTYPE html>
       <html <?php language_attributes(); ?>>
       <head>
       <meta charset="<?php bloginfo( 'charset' ); ?>" />
       <meta name="viewport" content="width=device-width" />
       <title><?php wp_title( '|', true, 'right' ); ?></title>
       <link rel="profile" href="http://gmpg.org/xfn/11" />
       <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
       <!--[if lt IE 9]>
       <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
       <![endif]-->
   
       <?php wp_head(); ?>
       </head>
   
       <body <?php body_class(); ?>>
       <div id="page" class="hfeed site">
       	<?php do_action( 'before' ); ?>
       	<header id="masthead" class="site-header" role="banner">
       		<div class="site-branding">
       			<h1 class="site-title"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
       			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
       		</div>
   
       		<nav id="site-navigation" class="navigation-main" role="navigation">
       			<h1 class="menu-toggle"><?php _e( 'Menu', 'beanbag' ); ?></h1>
       			<div class="screen-reader-text skip-link"><a href="#content">"><?php _e( 'Skip to content', 'beanbag' ); ?></a></div>
   
       			<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
       		</nav><!-- #site-navigation -->
       	</header><!-- #masthead -->
   
       	<div id="main" class="site-main">
       ```
   
 * CSS(Edit CSS)
 *     ```
       /*
       Welcome to Custom CSS!
   
       CSS (Cascading Style Sheets) is a kind of code that tells the browser how
       to render a web page. You may delete these comments and get started with
       your customizations.
   
       By default, your stylesheet will be loaded after the theme stylesheets,
       which means that your rules can take precedence and override the theme CSS
       rules. Just write here what you want to change, you don't need to copy all
       your theme's stylesheet content.
       */
       body {
       	font-family: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
       	text-align: center;
       }
   
       a, a:visited, a:focus, a:active {
       	color: #1693A5;
       	text-decoration: none;
       }
   
       a:hover {
       	color: #FF0066;
       	text-decoration: none;
       }
   
       .header a {
       	color: #CDD7B6;
       	text-decoration: none;
       }
   
       .header a:hover {
       	color: #fff;
       	text-decoration: none;
       }
   
       .content-area {
       	margin: 0 auto;
       	margin-top: 80px;
       	width: 960px;
       	text-align: left;
       }
   
       .header {
       	position: fixed;
       	width: 100%;
       	height: 40px;
       	background: #333;
       	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
       }
   
       .site-footer {
       	margin: 0 auto;
       	width: 960px;
       	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
       	text-align: left;
       }
       ```
   
 * I reset header.php. I’m not sure where I should place my divs at.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 1 month ago](https://wordpress.org/support/topic/_s-header/#post-3741906)
 * Look up this article regarding CSS classes
    [http://www.w3schools.com/css/css_id_class.asp](http://www.w3schools.com/css/css_id_class.asp)
 *  Thread Starter [Joshua Sommer](https://wordpress.org/support/users/beanbagg/)
 * (@beanbagg)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/_s-header/#post-3741910)
 * I’m not sure how that’s supposed to help me. :p
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 1 month ago](https://wordpress.org/support/topic/_s-header/#post-3741966)
 * Sorry, I can’t explain it properly. Hopefully someone else can chime in.
 *  Thread Starter [Joshua Sommer](https://wordpress.org/support/users/beanbagg/)
 * (@beanbagg)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/_s-header/#post-3742039)
 * I think I’ve figured it out. Ty!
 *  Thread Starter [Joshua Sommer](https://wordpress.org/support/users/beanbagg/)
 * (@beanbagg)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/_s-header/#post-3742096)
 * Could someone look at the header and tell me what’s wrong? All I want to do is
   center the links.
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/_s-header/#post-3742097)
 * Try adding this to your custom CSS:
 *     ```
       @media (min-width: 800px) {
       .navigation-main {
           float: none;
           margin: 0 auto;
          width: 800px
       }
       }
       ```
   
 *  Thread Starter [Joshua Sommer](https://wordpress.org/support/users/beanbagg/)
 * (@beanbagg)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/_s-header/#post-3742098)
 * … look at it.
 * edit: nvm! it worked! if you knew how many hours I spent trying to figure this
   out.. haha. thank you! :]
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 1 month ago](https://wordpress.org/support/topic/_s-header/#post-3742099)
 * What’s wrong with it?
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/_s-header/#post-3742100)
 * What is in your custom CSS file?
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/_s-header/#post-3742101)
 * Looks okay now – CSS wasn’t working at all a minute ago – probably a cache/server
   delay.

Viewing 15 replies - 1 through 15 (of 23 total)

1 [2](https://wordpress.org/support/topic/_s-header/page/2/?output_format=md) [→](https://wordpress.org/support/topic/_s-header/page/2/?output_format=md)

The topic ‘_S Header’ is closed to new replies.

 * 23 replies
 * 4 participants
 * Last reply from: [Joshua Sommer](https://wordpress.org/support/users/beanbagg/)
 * Last activity: [13 years, 1 month ago](https://wordpress.org/support/topic/_s-header/page/2/#post-3742223)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
