Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
What CSS have you tried so far?
A centered menu with good spacing and a logo image. :]
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
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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’.
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
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I’m not sure how that’s supposed to help me. :p
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Sorry, I can’t explain it properly. Hopefully someone else can chime in.
I think I’ve figured it out. Ty!
Could someone look at the header and tell me what’s wrong? All I want to do is center the links.
Try adding this to your custom CSS:
@media (min-width: 800px) {
.navigation-main {
float: none;
margin: 0 auto;
width: 800px
}
}
… 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
(@anevins)
WCLDN 2018 Contributor | Volunteer support
What is in your custom CSS file?
Looks okay now – CSS wasn’t working at all a minute ago – probably a cache/server delay.
