Logo image inline with Navigation bar

  • kickit24

    (@kickit24)


    12 years, 4 months ago

    Hello. I am kinda frantically recreating a customized theme from a Joomla 1.5 site to WordPress and could use some assistance with one last hitch I am having.

    Just to understand what I am trying to do, the Joomla site is: http://wonderdogs.net/. The logo is the dog with a cape 🙂 We like the look because he’s kinda presenting the menu to the visitor.

    My development wordpress site is at: http://www.rebcoc.com/

    Although the basic layout is there, if you close down the width of the browser window, the menu hides behind the logo (it was a dickens to get it to float above the nav bar, LOL.

    So now I’m thinking perhaps I should have the logo as part of the Nav bar so when the width narrows, the logo will move with the menu. But when I’ve attempted this, all kinds of crazy starts to occur.

    I’ve customized a twenty thirteen theme to get where I’m at.

    Here is the header.php code I’ve monkeyed with to get the logo and right side header text to show:

    <body <?php body_class(); ?>>
	<div id="page" class="hfeed site">
		<header id="masthead" class="site-header" role="banner">
				<span class="site-logo" href="http://bestgreencomputer.com/images/logo5.png"></span>
				<span class="hdr-text">
					For North County San Diego Private Dog Training -
					<a class="wht" href="http://www.rebcoc.com/services/private-in-home-lessons/">Click here</a><br>
					For Phone or Skype Consultations by Appointment -
					<a class="wht" href="http://www.rebcoc.com/services/consultations/">Click here</a><br>
					760-739-0580
				</span>
			<div id="navbar" class="navbar">
				<nav id="site-navigation" class="navigation main-navigation" role="navigation">
					<h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
					<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
					<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
					<?php get_search_form(); ?>
				</nav><!-- #site-navigation -->
			</div><!-- #navbar -->

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

		<div id="main" class="site-main">

    where logo5.png is the logo image file.

    What do you think is the best way to keep the menu from ‘hiding’ under the logo?

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Logo image inline with Navigation bar’ is closed to new replies.