Grow your CSS skills. Land your dream job.

Logo Centered in Nav

  • # September 11, 2012 at 7:51 am

    Having the same header layout, that is pretty smart. Although I dislike not having it inside an h1.

    # September 11, 2012 at 9:07 am

    @andy_unleash as long as the logo comes before the navigation elements itself it would make more sense to the user using the screen reader, take the following for example:

    For users using a screen read this makes sense as a site logo should always come before the main navigation to introduction the users position on the screen more formally, however something like the below would confuse the user.

    The reason why is that screen readers look at the markup in the page not the layout itself as its impossible for a screen reader to understand what goes where and how a user interacts with it where are the DOM tree is a more solid structure for it to work with when presenting the content to the user.

    Hope I didn’t misunderstand your reply.

    # September 11, 2012 at 12:37 pm

    No I mean I get that they read code down/dom tree. But isn’t that semantically correct if the logo is not the first thing a sighted user would experience?

    I get where you’re coming from with the formal intro and a logo commonly being the very first item however. Perhaps a display: none; element in it’s place? Visibility would still read it but to sighted users it would be hidden.

    # September 11, 2012 at 4:53 pm

    Thanks! I think I got it!! http://jsfiddle.net/P7PNj/6/

    # September 11, 2012 at 4:53 pm

    oops sorry this was before I refreshed to see other comments

    # September 11, 2012 at 8:29 pm

    http://codepen.io/anon/pen/HyLdg

    # September 11, 2012 at 9:36 pm

    > I get where you’re coming from with the formal intro and a logo commonly being the very first item however. Perhaps a display: none; element in it’s place? Visibility would still read it but to sighted users it would be hidden.

    Using `display: none` doesn’t work with screen readers as elements using this property get ignored, if you wanted your logo hidden for those who are sighted you would use `visibility: hidden` and absolutely position it off the left side of the screen.

    # September 12, 2012 at 9:53 pm

    Thanks wolfcry911. Thanks for the comments about the break and the clearing of the floats. You’re right. I didn’t need it there. I still get a little confused about floats sometimes.

    # October 1, 2012 at 8:07 am

    Hey Miela84, add this to the bottom of your css and play with the width of the window. Just use this s you can show it off in class hehehe. Really nice if you want to develop for mobile devices.

    @media only screen and (min-width: 0px) and (max-width: 1000px) {
    #header{
    height: 160px;
    margin-top:140px;
    }
    #header a.logo {
    margin: -70px 0 0 -108px;
    }
    #header ul{
    width:300px;
    padding-top:80px;
    }

    #header ul li:nth-of-type(4) {
    margin-left:0px;
    }
    }

    # October 1, 2012 at 8:24 am

    Just add insert into this part of css #header ul li a.logo {
    this: background-position: center;

    # May 15, 2013 at 10:02 am

    I have a similar menu I need help in. This is what I’m working with. Can u help me please.

    http://www.stephentemple.com/events/index.jpg

    # May 15, 2013 at 10:04 am

    This is how I have it setup in html

    # May 15, 2013 at 10:04 am

    Here is my css

    body { background-color: #3d1c0f; background-image:url(../images/body_bg.jpg); background-position:top center;
    background-repeat: no-repeat; background-size: 100%;
    }

    #container { width:980px; margin: 0 auto;
    }

    #header {width:980px; height: 260px; }
    #logo { display: block; width: 370px; height: 290px; background:url(../images/logo.png) no-repeat; position:relative; float: left; margin-left: 300px;}

    #nav {width: 980px; Height: 43px; position: absolute;}

    #nav ul { list-style: none; }

    #nav li {display: inline;}
    #nav a { float: left; display: block; margin-right: 40px; }

    #wrapper { display: block; width: 980px; height: 850px; background: #fff; margin-top: 30px; border: 1px solid #000;
    -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;
    }

    # May 15, 2013 at 10:43 am

    Please make a Codepen.

    # June 5, 2013 at 4:30 pm

    ok. I got it fix though. Thanks

Viewing 15 posts - 16 through 30 (of 32 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".