Appropriate Slider Image Size Part II

[Jeffrey Satkowski]

Hello again.

We have the slider images set to 960×350 as you mentioned here a couple of weeks ago.

Is there supposed to be a white strip visible above the slider and below the menu items?

I’m viewing this on a 15″ laptop screen.

I’m seeing the white strip when viewing the page in Safari 8.0.4 on OS X Yosemite. However, when I view the page on the same computer in Firefox 36.0.4 the white strip doesn’t appear and the page looks like it should.

Thanks!

Update: Now in Firefox and Safari, when logged into WordPress the white strip appears, but when I am logged out, the white strip disappears.

Attachments:

1. 

   Screen-Shot-2015-03-29-at-8.10.06-AM.png
   

[Bill Robbins]

Good Morning Jeffrey,

Great question. It’s not intended for there to be a white strip there. In the screenshot it looks like the navigation menu is wrapping onto a third line. That’s causing the menu items there to push the slideshow down and expose the content “wrapper” at the top. When you’re logged in the admin bar also pushes content down which complicates this a bit more.

One thing you can do is make the navigation menu a bit wider. That way it can accommodate a few more items. Here’s how to do that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (min-width: 1024px) {
   
   	#navigation {
   		width: 700px;
   	}
   
   }
   

3. Update your settings.

It looks like on your live site you have cut back on the number of items. Hopefully that will let you add some back. If you run into trouble, let me know.

Have a great week,
Bill

[Jeffrey Satkowski]

Bill, thanks for the reply and tips. I added the CSS code and it cut the white strip down some. I’ll play with it a bit more.

Most of the menu items are hidden and only appear when logged into WP, which is probably why the site looks okay when not logged in, i.e. only a couple of menu items are showing, plus no admin bar.

Jeff

Attachments:

1. 

   Screen-Shot-2015-03-31-at-6.52.49-AM.png
   

[Bill Robbins]

That makes sense. If it’s not possible to make the names of the menu items shorter so that they fit on one line, you can move the whole menu higher when a user is logged in. Add this to your Custom CSS to do that:

@media only screen and (min-width: 1024px) {

	.logged-in #navigation {
		margin-top: 27px;
	}

}

You can adjust the 27px in the snippet above to set the distance between the top edge of the site’s wrapper and the top of the navigation menu.

See if that doesn’t allow you to move the menu up and out of the way for logged in users.

Bill

[Jeffrey Satkowski]

Bill, thank you again!

I added that CSS code and it moved the menu up and the white strip disappeared.

Being at work, I’m on a Windows 8.1 PC with Firefox and it looks good. I’ll check it again at home on my laptop, but I suspect it will be fine there too.

Thanks!

Jeff

Attachments:

1. 

   Capture.png
   

[Author]

Posts