when using ssl, the wordpress site displays wrong layout

I am new to wordpress.  We attached an SSL to the site.  When you view nsitedesigns.com (without https:) you see correct layout with navigation bar BELOW fish.  When you view with https, the navigation bar jumps ABOVE fish.  How do I fix?

http://nsitedesigns.com/
nsitedesignsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
Wow, what an interesting phenomenon!

You might want to start with valid markup.  Both HTTP and HTTPS appear to have some issues.
http://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.nsitedesigns.com%2F
http://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.nsitedesigns.com%2F

I'm not sure that the markup is the root of the problem, but it's a place to start.  After that, you might want to look into the WP plug-ins to see if any of them are concerned about HTTPS.
0
hieloCommented:
Read HTML comment in the code below:
<header id="masthead" class="site-header" role="banner">
	
<!-- Around line 111: this is missing in the https page.  See if the template is checking for HTTPS header somewhere -->
			<a href="https://www.nsitedesigns.com/"><img src="https://www.nsitedesigns.com/wp-content/uploads/2015/07/cropped-header-fish-960x25011.jpg" class="header-image" width="960" height="250" alt="Nsite Designs Website Design : Sheboygan County Wisconsin" /></a>
				
		
		<hgroup>
			<h1 class="site-title"><a href="https://www.nsitedesigns.com/" title="Nsite Designs Website Design : Sheboygan County Wisconsin" rel="home">Nsite Designs Website Design : Sheboygan County Wisconsin</a></h1>
			<h2 class="site-description"></h2>
		</hgroup>

Open in new window


Line 137 also is different:
<!-- #site-navigation -->
<!-- I suspect this <a> tag is the one that is supposed to be before the <hgroup> -->
				<a href="https://www.nsitedesigns.com/"><img src="https://www.nsitedesigns.com/wp-content/uploads/2015/07/cropped-header-fish-960x25011.jpg" class="header-image" width="960" height="250" alt="Nsite Designs Website Design : Sheboygan County Wisconsin" /></a>
			</header><!-- #masthead -->

Open in new window

1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
nsitedesignsAuthor Commented:
hielo,

Where do I look for the code snippets you provided?  Again, new to wp....  Not a fan of it at all!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

hieloCommented:
look in header.php of the theme you are using.  If you can't find it there, then see if the page(s) in question have a specific page template and then look within that template.
0
nsitedesignsAuthor Commented:
I checked my header.php page.  This is what displays on line 36-40.  It is different from what you typed

      
	<header id="masthead" class="site-header" role="banner">
		<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>

Open in new window


Where do I find my https page?  You cited that I need to add something to it on line 111.
0
hieloCommented:
>> Where do I find my https page?
There is no "dedicated" spot-on-the-file or source file to handle HTTPS connections.  If the theme/template developer wanted to serve content differently depending on whether it is HTTPS or not, then he/she can do so on any source file.  But the difference in markup that I observed seems to indicate this would have taken place in header.php

>> You cited that I need to add something to it on line 111.
The reference to Line 111 is the line number as seen via the browser's source code.  The line number on the source code of the php file will most likely be completely different since the browser gets the dynamically generated html content.
0
nsitedesignsAuthor Commented:
Thank you Hielo
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.