How to center logo and menu to line up with edges of content

  • Resolved Ian Schoonover

    (@iantskon)


    10 years, 2 months ago

    Site I’m working with: http://www.sulu13.net/14/

    I’d like to have the Logo image line up with the left side of the (posts) content and the non-responsive menu line up with the right side.

    I tried putting a wrapper around both the logo and menu, but then it lost all responsiveness. My coding abilities are novice, but with some direction I can get it figured out.

    Thanks in advance!

Viewing 7 replies - 1 through 7 (of 7 total)
  • rdellconsulting

    (@rdellconsulting)

    10 years, 2 months ago

    OK, the way to reposition elements is usually:

    .element {
position: relative;
top:    0px; /* start position */
left:   0px; /* start position */
}

    You then change 0px to whatever you need, including -ve values (eg -100px). So try & adjust:

    .tc-header .brand a {   /* Logo */
  position: relative;
  left: 300px;
}

.navbar .navbar-inner {  /* Navbar */
  position: relative;
  top: 60px;
  left: 400px;
}

    }

    Thread Starter Ian Schoonover

    (@iantskon)

    10 years, 2 months ago

    @rdellconsulting
    Thanks for the response! This works fine for full screen at anything over 1660px, but when re-sizing the browser window everything goes out of whack, similar to when I had used a wrapper around both elements. I’ll leave the CSS in place temporarily so you can see what I’m talking about.
    Thanks,

    Ian

    Thread Starter Ian Schoonover

    (@iantskon)

    10 years, 2 months ago

    I think the issue is because my responsive (JQuery) menu is sharing the same classes as the non-responsive menu (.navbar .navbar-inner )
    I’ll update soon as I figure out how to change the classes of my JQuery menu

    Thread Starter Ian Schoonover

    (@iantskon)

    10 years, 2 months ago

    Thanks again for the help rdell.

    I went back and gave it a closer look, turns out I was able to solve the issue with a wrapper and a few media queries for width adjustments.

    rdellconsulting

    (@rdellconsulting)

    10 years, 2 months ago

    Can you design a Like button for this Forum 😉

    rdellconsulting

    (@rdellconsulting)

    10 years, 2 months ago

    :)))))))))))))))))))

    Thread Starter Ian Schoonover

    (@iantskon)

    10 years, 2 months ago

    ah where’d my comment go? 🙁

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to center logo and menu to line up with edges of content’ is closed to new replies.