Support » Theme: Max Magazine » Changing Navigation Bar Background

  • Resolved Enthused1015



    I’m trying to change the background of my navigation bar. Following the advice of the administrator, given to another user on this theme’s website, I separated the navigation bar from the header in the header.php, however now I’m admitably a bit lost on what to do now. Please help, most appreciated!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator Andrew Nevins


    That advice should have been preceded by “First make a Child Theme“.

    Once you have the Child Theme, enter this in your Child Theme style.css file;

    #nav {
     float: left;
     width: 100%;
     /* Here's the background (below) */
     background: deeppink;

    Hi Andrew,

    Thanks for getting back to me! Alright, I set up a child theme, however now the pages in my navigation bar are stacked vertically, when originally they were horizontal. How can I fix that?

    Try adding the following to the #nav element:
    position: relative;

    Moderator Andrew Nevins


    For some reason your <li> menu items now have a width of 100%.
    Rectify this in your Child Theme style.css file by adding;

    #nav ul li {
     width: auto;

    Thank you Andrew and psidwell,

    Your advice worked perfectly! Now, I have another question. How can I remove the giant white bar that stretches below the logo, but above the navigation bar?

    Moderator Andrew Nevins


    Not sure I see giant space, perhaps I’m looking in the wrong place.
    Is this what you want;

    #header .header-wrap {
     margin-bottom: 0;


    I’m not talking about space, there’s a wide white line that stretches across the body of the page, right underneath the logo. It looks like this:


    Moderator Andrew Nevins


    I see. That’s part of your background image.
    To remove it, try;

    #header .header-wrap {
     background: none;



    Forum Moderator

    #header .header-wrap {
        background: url("images/sep-bg.png") repeat-x scroll center bottom transparent;
        margin-bottom: 10px;
        overflow: hidden;
        padding-bottom: 10px;

    Remove background: url("images/sep-bg.png") repeat-x scroll center bottom transparent;

    In future, try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser. Or try a dedicated CSS resource such as instead.
    it is really beyond the scope of these forums to deal with general CSS issues.

    Fantastic! You’re awesome, man! Thanks so much for all of your help.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Changing Navigation Bar Background’ is closed to new replies.