• Hi there! I’m building my first theme right now using the _s starter theme as a basis. I have modified the navigation in the header so that the logo of the website containing a link to the front page shows up on top of the navigation bar. Sometimes it shows up correctly, but in 90% of the cases it doesn’t show up at all and the whole navigation bar is messed up. This happens even within the same page after refreshing. Unfortunately, I’m testing on a local server so I cant provide a link to the homepage. But the code looks like this:

    header.php

    <nav id="site-navigation" class="main-navigation" role="navigation">
            <a id="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="/images/biologo.png" title="Home"></a>
    			<h1 class="menu-toggle"><?php _e( 'Menu', 'biotheme' ); ?></h1>
    			<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'biotheme' ); ?></a>
             <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    		</nav><!-- #site-navigation -->

    style.css

    #logo   {
    	display: inline;
    	positon: absolute;
    	float:right;
    	margin:10;
    	z-index: 100;
    	}
    
    .main-navigation {
    	float: right;
    	width: 92.5%;
    }
    .main-navigation ul {
    	list-style: none;
    	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    	height: 40px;
    	background-color: #000;
    	opacity: 40;
    	margin-top: 75px;
    	padding-left: 0;
    	z-index: 1 ;
    }
    .main-navigation li {
    	float: left;
    	position: relative;
    }
    .main-navigation a {
    	display: block;
    	margin: 10px;
    	text-decoration: none;
    }
    .main-navigation ul ul {
    	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    	display: none;
    	float: left;
    	left: 0;
    	margin-top: 15;
    	background-color: #000;
    	position: absolute;
    	top: 1.5em;
    	z-index: 99999;
    }
    .main-navigation ul ul ul {
    	background-color: #000;
    	left: 100%;
    	top: 0;
    }
    .main-navigation ul ul a {
    
    	width: 200px;

    What i really don’t understand is how the code is working perfectly fine in some cases, but not in (most) others. Could someone please help me understand what’s going on and where my mistakes are? There are no plugins installed and the theme is not modified yet besides of the css.

  • The topic ‘header shows up correctly, but only sometimes?’ is closed to new replies.