Another "center header/menu" post

  • Resolved elkrafto

    (@elkrafto)


    12 years, 12 months ago

    Hi,
    I did a search, and while a lot of people have asked the same question before, none of the answers seem to make sense for my site. I want my header graphic and menus to be centered, but they align left. I’m using the portfolio press theme, and none of the code that people need to change in the other threads seems to be there, unless I am just completely missing it. I’m new to CSS, but maybe that theme is coded much differently?

    My site is: https://www.erikpkraft.com/wptest

    Any pointers will be very appreciated.

    Thanks,
    Erik

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi Erik,

    Before making changes to a theme, it’s best practice to create a Child Theme so that future updates to the theme do not overwrite your changes. Once you have created a Child Theme, you can add the following CSS to your Child Theme’s style sheet:

    #logo {
    margin: 0px 120px;
    }

    #navigation {
    margin: 0px 100px;
    }

    Here’s the explanation of of what’s going on. Your header graphic and navigation menu are inside of a div with the class of col-width. The CSS for that class sets the width of that div at 980px. Your header image is 740px. So, subtract the width of your image from the width of the div and you get 240px. Then divide that by 2 (left and right margins) and you have 120px. I made the margin for the navigation smaller because at 120px the navigation menu would wrap to two lines.

    I used the Firebug add-on with Firefox to pinpoint the CSS controlling the various elements on your page. It’s a great tool for inspecting and testing CSS.

    Hope this helps!

    Thread Starter elkrafto

    (@elkrafto)

    Hi ChristiNi,
    Thanks so much! I will work on the child theme, and try those changes. This is very helpful advice. I will also try firebug in the hopes of figuring this all out faster. It sounds like that will help me when I get to trying to figure out what element is what, and how to change the color, which is my next step.

    Hi elkrafto,

    Just thought I’d drop by to see how your changes are going. Hope everything is going well with your website!

    Regards,

    Christi N.

    Thread Starter elkrafto

    (@elkrafto)

    Hi ChristiNi,
    Your advice worked, and I now have a nice, centered header (now I have to decide if I like that!). The child theme is very helpful. I’ve even been messing with @font-face, so I am finding new ways to be in over my head. Thanks!

    You’re welcome elkrafto. I’m happy I was able to help! If you have time, please feel free to mark this topic as resolved.

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Another "center header/menu" post’ is closed to new replies.

Tags