Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Thanked 0 Times in 0 Posts

    Help Centering Logo and Menu

    Hi I'm a newbie and was looking to get some help. I am trying to center the "logo" and the "nav menu" (nav menu would be under the logo.
    I recently changed my logo (nlreedphotographyblog.com) and this is the previous code I had:

    #mainNav { top: 70%;; left: 50%; margin-left: -50%; width: 100%; padding:
    0.1em 0 0.3em 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; background: #fafafa; text-align: center; }ul#menu-main-nav { display: inline-block; margin: auto; }#logo { display: block; float: none; margin: 0; }#header .inside { padding-top: 1em; }#logo img { margin: auto; }
    @media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)
    *{* #header #logo { width: 80%; padding: 0 10%; }* #mainNav { position: absolute; top: 65%; left: 50%; margin-left: -50%; }}

    What must I change or do to get the new logo center as the nav menu as well? Any help is greatly appreciated.

    the page I need help with is here: nlreedphotographyblog.com

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Thanked 1,827 Times in 1,811 Posts
    Hello bkdons11233,
    The logo is easy so we'll start there -
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto

    So following those rules, your logo will center with these bits in red added.

    #logo {
        /*display: inline-block;
        float: left;
        margin: 0 0 0 3%;
        padding: 0;*/
        margin: 0 auto;
        width: 426px;
    The menu can be center the same way if you give it a width.

    If you'd rather not give it a width, look at an example I have of another method here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2013
    Thanked 0 Times in 0 Posts
    Hey Excavator thanks for the reply I tried it but it didn't work. I'm looking to do something like this http://nlreedphotography.com/ with the Logo and menu bar (without the large white gap between them).

    Do you know a CSS code I can use?

    Here is the page I'm trying to do it for: http://nlreedphotographyblog.com/


    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts