"Coding the Header and Footer" - My Navigation Menu is Vertical!

I just got it horizontal by replacing block (I think) with inline. but now it's left aligned. I guess I just center it at this point somehow? Or am I going down a bad path?

/* ========================================================================== Header ========================================================================== */

header { margin: 4% 0 0 0; }

nav { display: -webkit-box; -webkit-box-orient:horizontal; padding: 2% 0; border-bottom: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
margin: 2% 0 2% 0; }

nav a { font-family: 'GoudyRegular'; display:inline; #################################### -webkit-box-flex:1; text-align:center; font-size: 1.25; color: #666; }

Note the "###########" where supposed to indicate where I made the change. When I posted, all of the code ran together. Ignore the "##########".

I added a text align: center to the nav section. That centered it, but in Zac's it's evenly spread out.

If you are attempting to center the navigation bar at the top of the page, you will need to center the wrapping div using CSS. Great link on W3C about this:

http://www.w3schools.com/css/css_align.asp

There are several options with varying browser compatibility.

If you want all of the links to be evenly distributed you will need to use left floats and margins. See the "Floating List Items" section here:

http://www.w3schools.com/css/css_navbar.asp

Correction: floats and widths.

Floating requires a "block" display. When using "block" display, this nav menu will only go vertical. Only with inline does the menu go horizontal. I think the code I'm dealing with now is different than what Zac worked with in the tutorial or something. It's frustrating that it won't work.

The float left replaces the in-line and should make the vertical list horizontal. See example of code and output on W3C:

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float

I appreciate your help, but for the code that I'm working with for this Treehouse tutorial, it is just making things worse.

/* ========================================================================== Header ========================================================================== */

header { margin: 4% 0 0 0; }

nav { display: -webkit-box; -webkit-box-orient:horizontal; padding: 2% 0; border-bottom: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
margin: 2% 0 2% 0; text-align: center; }

nav a { font-family: 'GoudyRegular'; display:inline; -webkit-box-flex:1; text-align:center; font-size: 1.25; color: #666; }

That's my current code. When I make the changes that you specified--which I know are usually right--it pushes the menu over to the left (vertical now) with other page content smushed up against it.

Try this:

header { margin: 4% 0 0 0; }

nav { display: -webkit-box; -webkit-box-orient:horizontal; padding: 2% 0; border-bottom: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6; margin: 2% 0 2% 0; text-align:center; list-style: none; }

nav li { float: left; }

nav a { display: block; width: 60px; font-family: 'GoudyRegular'; -webkit-box-flex:1; text-align:center; font-size: 1.25; color: #666; }

I hate to break it to you, but it's still not working. I recommended that Treehouse focuses on version control of the tutorial materials and possible adds a screen next to the video displaying what code is currently in use. It's just too confusing typing while looking at the video, and there's no way to know where the disconnect is on an issue like this.

As far as your edits, it still produced a vertically stacked menu. I appreciate your help. I'm sure you're as frustrated as I am.

Can you paste in a code block the current HTML you are using. I need to see the navigation structure specifically.

Michael: PLEASE FOR THE LOVE OF GOD don't link students to W3Schools pages. Their sites are incorrect, ad laden, and generally worthless for any purpose. MDN is a far superior resource and just as simple to find stuff on.

http://www.w3fools.com/

It's funny. I had worked around the problem by making the list "inline" via the CSS. But I wasn't satisfied. So, right before you replied, I was in the process of converting the list to a <ul> without using variables. But I decided to revert back to the Treehouse code, since you're helping me out. And now, even with inline in the CSS, the menu is vertical AND has bullets... I don't get it! Haha!

My website is live at www.coreydeanstone.com

Fixed the bullets---had false in ' 's.

Still have the CSS as inline for the nav menu. Any of the block formatting from the tutorial made stuff go all over the place.

My formatting is really giving me fits. I'm almost certain my code is = your code, and yet my grid_12's never seem to work like yours did. It's really frustraring. I appreciate any help ASAP!

Did you find the issue with your formatting? I checked your website link and the navigation bar looks horizontal.

Oh, I went with a new template and have been working away from the tutorial for a couple of days now. I appreciate the tutorial. It gave me a really solid foundation for working on my own template, but I had to stop about 70% of the way through. There were just too many things that my code wasn't doing but yours was. As a viewing tutorial, though sometimes fast, I give it an A! But as a do-it-yourself follow-along, it was difficult to get some of the functionality to work. No hard feelings, but as far as WordPress goes, I'm flying solo for a little while. I might come back and watch the rest in a few days. Thanks for the assistance!

I appreciate the feedback man, and the upcoming videos will hopefully be much better in that regard. Best of luck and let us know if we can help with anything!!!

That does work although its no good when it comes to being responsive as you said

I am still having the issue with the nav showing vertical in every browser except chrome.

and as with Corey I have issues with the grid system. I have a logo with a grid of 2 title with a grid of 8 and another logo grid of 2 . so 2+8+2 = 12 that works no bother.

I add in the nav with a grid of 12 and the nav gets squashed into the right hand side of the 2+8+2 = 12 element I change it to grid 11 and it works????

I have been struggling for a few days with this now and would really appreciate some help. I have looked around the net and cannot find the answer!

http://ubuntuwpress.cloudapp.net/test/wordpress/

<head>

        <title>

            <?php

                wp_title( '-', true, 'right' );

                bloginfo( 'name' );

            ?>
        </title>

        <meta name="viewport" content="width=device-width, initial-scale = 1.0">
        <?php wp_head(); ?>
    </head>


<body>


    <div class="container clearfix">

        <header>
    <div class ="title" >
                <div class="grid_2  omega">

                    <img src="http://ubuntuwpress.cloudapp.net/test/wordpress/wp-content/themes/wpportfolio/images/kano.jpg" >
                </div>




    <div class="grid_8 title omega">
                            <hgroup >
                                <h1> 
                                <br>

                                <a href="<?php bloginfo('siteurl'); ?>"><?php bloginfo('name'); ?></a>

                                </h1>
                                <h2>
                                <?php bloginfo('description'); ?></h2>
                            </hgroup>

    </div>

                <div class="grid_2  omega">

                            <img src="http://ubuntuwpress.cloudapp.net/test/wordpress/wp-content/themes/wpportfolio/images/kano.jpg" >
    </div>  

</div>

    <div class=" grid_11 omega  ">
                        <nav>
                            <?php
                                $args = array(
                                    'menu' => 'main-menu',
                                    'echo' => false
                                );

                                echo strip_tags(wp_nav_menu( $args ), '<a>');

                            ?>
                        </nav>
        </div>
            </div>          

        </header>