Using _s theme to create my own, having trouble right off the bat

  • Resolved jmayoff

    (@jmayoff)


    10 years, 11 months ago

    I am trying to have the .site-branding div and the ‘.main-navigation’ nav to line up next to each other.

    I’ve tried float:left on both classes and I’ve tried making sure the divs aren’t too long so that the nav ends up on the second line because it’s too long.

    This is the custom.css I’m using. (I so far have not touched any other file, except the functions file to enqueue my custom.css) 

    /*******************************
** Custom CSS for Organic theme
********************************/

body{
	background-color:white;
}

.site-header{
	width: 1600px;
	margin: 0 auto;

}

.site-branding{
	width:200px;
	float: left;
}

.main-navigation{
	width: 600px;
	float: left;
}

.site-title{
	text-indent: -9999px;
	background-image: url('img/logo.png');
	background-repeat: no-repeat;
	height: 73px;
	margin: 25px 0 0 25px;
	width: 100px;

	}

.site-description{
	text-indent: -9999px;
}

#site-navigation{
	width: 600px;
}	

.menu{
	width: 960px ;
	margin: 0 auto ;
}

#content{

	width: 960px;
	margin: 0 auto;
}

.home #page #masthead{
	height: 849px;
	background-image: url('img/background.jpg');
}

    Here is the header.php

    <?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="content">
 *
 * @package Organic
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?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 href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
		</div>

		<nav id="site-navigation" class="main-navigation" role="navigation">
			<h1 class="menu-toggle"><?php _e( 'Menu', 'organic' ); ?></h1>
			<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'organic' ); ?></a>

			<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
		</nav><!-- #site-navigation -->

	</header><!-- #masthead -->

	<div id="content" class="site-content">
Viewing 1 replies (of 1 total)
  • Thread Starter jmayoff

    (@jmayoff)

    It appears there was a clear:left in the main stylesheet that was messing things all up. Solved with a clear:none in .main-navigation of custom.css

Viewing 1 replies (of 1 total)
  • The topic ‘Using _s theme to create my own, having trouble right off the bat’ is closed to new replies.