Skip to:
Content
Pages
Categories
Search
Top
Bottom

[Resolved] Need help aligning my image logo and navigation bar elements

  • Avatar of shortoldtree
    shortoldtree
    Participant

    @shortoldtree

    Hey guys, need some help here with aligning the header bar of the default buddypress theme.

    I am trying to use an ‘image logo’ and left align the ‘navigation menu’. This is the result I want:

    My Image Logo
    Home|Create|Members

    What is happening right now is:
    ———————————-
    |My Image Logo
    ———————————–
    | | | Home|Create|Members
    ———————————–

    I am not sure what I am doing wrong.

    Here is the css for the nav bar that I am using:

    #navigation #nav {
    margin: 40px 0 0 20px;
    list-style: none;
    padding: 0;
    float: left;
    border: 1px solid #000;

    }

    CSS for the h1 tag:

    #header h1 {
    float: left;
    margin-bottom: 0;
    margin-top: 0;
    color: #000;
    border: 1px solid #000;

    }

Viewing 3 replies - 1 through 3 (of 3 total)
  • Avatar of shortoldtree
    shortoldtree
    Participant

    @shortoldtree

    Please ignore my first question and refer to this question instead:
    ——————————————————————

    Hey guys, I need some help here with aligning the header bar of the default buddypress theme.

    I am trying to use an ‘image logo’ and left align the ‘navigation menu’. This is the result I want:

    My Image Logo
    Home|Create|Members

    The navigation menu needs to align right underneath the logo.

    What is happening right now is:
    ———————————-

    http://img580.imageshack.us/img580/8466/headerjdr.png

    I am not sure what I am doing wrong.

    Here is the css for the nav bar that I am using:

    #navigation #nav {
    margin: 40px 0 0 20px;
    list-style: none;
    padding: 0;
    float: left;
    border: 1px solid #000;

    }

    CSS for the h1 tag that contains the image:

    #header h1 {
    float: left;
    margin-bottom: 0;
    margin-top: 0;
    color: #000;
    border: 1px solid #000;

    }

    Any help appreciated!

    Avatar of @mercime
    @mercime
    Keymaster

    @mercime

    @shortoldtree site url? Need to see those styles in context.

    Avatar of shortoldtree
    shortoldtree
    Participant

    @shortoldtree

    Just an update that I solved this issue by increasing the height of the search-bar element, this is the CSS I used:

    #header #search-bar .padder {
    padding: 10px 15px 0 20px;
    height: 60px;
    }

    I think the height needs to be 10px more than the original height of the logo image to stop the misalignment from happening.

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

You must be logged in to reply to this topic.