You need to tweak HTML of that top header first before i would be able to suggest CSS for what you want to do. Wrap up all the HTML( from local Green Eats” to “If you see a dish…”) for the top header in a <div></div> with an unique ID to it. Then we can write CSS for hiding it on other pages that blog ans swapping position with the green header.
Thread Starter
nonamer
(@localgreeneats)
Surya, thank you for the tip.
Is this what you mean?
<html><body style="background-color:white;"><div id="content"><h1 class="" style="text-align: center;">local Green Eats</h1>
<h2 style="text-align: center;">Eat Fresh, Eat Healthy, Eat Well<img class="size-medium wp-image-2251" src="http://www.localgreeneats.com/wp-content/uploads/2016/07/IMG_3893-300x200.jpg" alt="IMG_3893" width="300" height="200" style="float: left; margin-left: 10px; margin-right: 10px;"/></h2>
<p style="text-align: center;"><span style="color: #000000;">The blog will feature tried and true recipes from our kitchen. Additionally, we will seek out the best versions of recipes served in restaurants and recreate them in our home in order to share the secrets of signature dishes with you.
</span></p>
<p style="text-align: center;"><span style="color: #000000;">If you see a dish you want in your weekly menu, let us know.
</span></p></div></body></html>
Thread Starter
nonamer
(@localgreeneats)
I inserted this in the actual plugin- header- section, is that correct?
Hello,
Have you used a plugin for the header?
If not, then you need to go to Appearance > Editor > header.php and look for both the menu codes inside that. You can find the codes somewhere below the </head> tag. You just need to swap them if you have some knowledge about code editing.
Thank you.
Thread Starter
nonamer
(@localgreeneats)
Yes for this actual header, I am using header-footer-script plugin. Since it is a plugin, will it be okay to swap out old code for this? (I am hoping I don’t break my site.)
I am familiar with CSS and a little with HTML and not at all with php.
Do I add the code I posted in the header.php?
Hello,
The code you have mentioned above will break the site if you add it under header.php file. You need to add this under the plugin you are using to see if it works.
But I think the code you have mentioned above needs some adjustment. This is not how the code should be.
Thank you.
Thread Starter
nonamer
(@localgreeneats)
I imagined that to be the case. Once the code is added to the header, can I make changes in CSS for the header to show only on one page? Also, how do I switch its position with my menu bar?
I can see that is done already. But just on the blog page the content is overlapping a bit. You can add following CSS to fix that.
.header-content {
margin-top: 65px;
}
Thread Starter
nonamer
(@localgreeneats)
I was able to solve this on my own, with display none tags for all other pages. For the blog page, I wrote this which works:
header-content{
top: 0;
position: fixed;
}