WordPress.org

Forums

Max Magazine
[resolved] Changing Navigation Bar Background (11 posts)

  1. Enthused1015
    Member
    Posted 1 year ago #

    Hello,

    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!

    http://www.musicenthusiastmag.com

  2. Andrew
    Forum moderator
    Posted 1 year ago #

    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;
    }
  3. Enthused1015
    Member
    Posted 1 year ago #

    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?

  4. psidwell
    Member
    Posted 1 year ago #

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

  5. Andrew
    Forum moderator
    Posted 1 year ago #

    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;
    }
  6. Enthused1015
    Member
    Posted 1 year ago #

    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?

  7. Andrew
    Forum moderator
    Posted 1 year ago #

    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;
    }

    ?

  8. Enthused1015
    Member
    Posted 1 year ago #

    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:

    _______________________________________________________________

  9. Andrew
    Forum moderator
    Posted 1 year ago #

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

    #header .header-wrap {
     background: none;
    }
  10. esmi
    Forum Moderator
    Posted 1 year ago #

    #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 http://www.css-discuss.org/ instead.
    it is really beyond the scope of these forums to deal with general CSS issues.

  11. Enthused1015
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic