CODEWITHSUNDEEP
phpcsswordpressnavbar
Patrick Donnirononon Henninger
Patrick Donnirononon Henninger

Reputation: 3

Wordpress TwentyTwelve Navbar and Logo BUG

I have a problem with my Navbar and logo. I have modified the Navbar that it is in a fix position on top with 100% width. I put the logo function also out of the page div so it is above the page in the header area.

The problem is that when I set the nav-bar margin-top to 0 the logo is under the navbar. When I set the logos margin-top to about 5rem it puts down the nav-bar to the place where the Logo starts.

Here are my codes for better understanding:

Header.php

<?php
/**
 * The Header template for our theme
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<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' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[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="navbar" class="navbar">
        <nav id="site-navigation" class="main-navigation" role="navigation">
            <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
            <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
            </nav><!-- #site-navigation -->
    </div>

    <div id="mainlogo" class="mainlogo">    
        <?php if ( get_header_image() ) : ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
        <?php endif; ?>
    </div id="mainlogo" class="mainlogo">

<div id="page" class="hfeed site">
    <header id="masthead" class="site-header" role="banner">
        <div id="slider" class="slider">
        <?php layerslider(1) ?>
        </div>
    </header><!-- #masthead -->

    <div id="main" class="wrapper">

Style.css

.header-image {
    display: block;
    margin-top: 0rem;
    margin-left: auto;
    margin-right: auto;
}

/* Navigation Menu */
.main-navigation {
    margin-top: 0p;
    margin-top: 0rem;
    position: fixed;
    z-index: 999;
    opacity:1;
    filter:alpha(opacity=100);
    width: 100%;
    margin-top: 0px;
    margin-top: 0rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 28px;
    font-size: 1rem;
    line-height: 1.42857143;
}
.main-navigation a {
    color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
    color: #FFF;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
    margin-left: 3rem;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    display: inline-block;
}

    /* Menu Background */
    .nav-menu {
        background-image: url("img/menu_repeat.png");
        padding-left: 0rem;
        padding-right: 0rem;
    }

    .slider {
        margin-top: 15px;
        margin-top: 1rem;
    }

    .mainlogo {
        margin-top: 50px;
        margin-top: 5rem;
    }

    .navbar {
        margin-top: 0px;
        margin-top: 0rem;
    }

Upvotes: 0

Views: 143

Answers (2)

dingo_d
dingo_d

Reputation: 11670

Use absolute positioning. Parent of nav should be relative positioned, and then the absolute positioned nav will be positioned in relation to that parent.

EDIT:

http://jsfiddle.net/y54m874c/

See this fiddle. In there I relatively positioned header class in which I put logo and navigation. Navigation is absolutely positioned in relation to that container. If I put nav > ul relatively positioned, and then put absolute position on li elements, then I could move them around in that unsorted list that contains them. If I removed the relative positioning in the unsorted list, then the list items would look for the next container they're in and watch what is relatively positioned, and use that as a reference.

Relative position by itself doesn't have to mean a thing. You can just say an element has a relative position, and then the inside elements will position according to him, and that element can stay where it is. But, you could also use relative positioning to position an element relative to itself.

Fixed position looks the height and the width of the window browser, and that is the 'reference frame' for it. It will move in relation to it. Static position is the default and it follows the flow of the html elements.

You could also use floats, but then you couldn't position elements to your liking.

The middle ground is to find when it's good for you to use manual positioning, and when to use floats.

Upvotes: 0

Patrick Donnirononon Henninger
Patrick Donnirononon Henninger

Reputation: 3

Ok i got it.

I set #navbar to fixed and main-menu to fixed too. seems to work as expectet

Thanks to all.

Upvotes: 0

Related Questions