2

This wordpress website http://www.sulu13.net/14 has a responsive logo and menu that I wanted centered in order to line up with the edges of the content below in the posts. So I added:

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

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

Upon adding this CSS, the screen gets a horizontal scroll bar and has white space (equal to the left: 380px) on the right side of the screen. Something tells me it has to do with the responsive menu button sharing the same classes, .navbar .navbar-inner as the non-responsive menu. I would change this, but my knowledge of PHP is limited so I wouldn't know where to start.

I've tried removing the JQuery menu itself, but this had no effect, (my guess is..) because I didn't actually remove the responsive menu button/menu.

Here's the main CSS file - http://www.sulu13.net/14/wp-content/themes/customizr/inc/css/green.css?ver=3.1.6

Any ideas would be appreciated, thanks in advance for your time.

Ian

nax3t
  • 117
  • 4
  • 4
  • 50

3 Answers3

2

width:100% (default width) + 380px (left value) = 100% + 380px

You would need to resize the navigation to compensate for the moving over if you want it to leave it the way it is, meaning something like width:calc(100% - 380px);

However, I'd recommend not using absolute position to be more responsive and not require the manipulation of values.

  • Remove the left:380px

  • Apply this:

    #menu-my-menu {
    float:right;
}

This approach also allows more list elements to be added and they will automatically be positioned correctly

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
0

Use this:

.navbar .navbar-inner {  /* Navbar */
position: relative;
top: 130px;
}

So, remove the left:380px. I don't understand what you mean by centering the menu and aligning with the text below, as the container of the text is wider than the one of menu and logo together and if you align the menu with the post below it will not be centered anymore. But removing left property should give you what you want.

Loolooii
  • 8,588
  • 14
  • 66
  • 90
0

Thanks for the help guys! 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.

nax3t
  • 117
  • 4
  • 4
  • 50