-
Posts
-
I am migrating a site to Enfold form a custom theme that was too hard to edit. I can do 95% of what is needed however one part is stumping me.
I am trying to replicate the menu and header area on this page: http://www.ptmi.net/
I have tried a few things:
- Editing CSS using the “Logo Center, Menu Below”
- Adding a top border using an image as seen here: https://kriesi.at/support/topic/full-width-image-divider-above-the-header/ but ti was stretched out and really messed up the rest of the page. (page was hidden under the header)
- Using the Full-width submenu but it looks like crap. Maybe If I can find a way to make it look the exact same as the current menu.
- I have settled on using the stock menu as I can make it look perfect but I essentially need to place a color section above it or a slider above it in the header.
Hey!
Please copy header.php file from your parent theme to your child theme and than find following line
<div id='wrap_all'>and add following code to right below that line
<div class="top-header"> <a class="top-header-logo" href="<?php echo get_home_url(); ?>"> <img src="http://www.ptmi.net/wp-content/themes/pacifictrail/assets/images/logo.png" alt="Pacific Trail"> </a> </div>and then add following code to Style.css file of your child theme in Appearance > Editor
.top-header { min-height: 605px; background-image: url(https://www.ptmi.net/wp-content/themes/pacifictrail/assets/images/header.jpg); background-size: cover; } .top-header-logo { text-align: center; padding: 50px 0; display: block; }Best regards,
Yigitok, 90% of the way there.
Added in the black mountains as well and set vertical align bottom but they seem stuck to the top. When the page is shrunk down to be thin, the mountains follow the logo up. Also can’t get rid of that 5px or so gap… not sure why.
The final aspect of the custom menu has that mountain as a highlight indicator. I tried using the same background trick to replace to hover fx on the menu with the mountain image with no luck.
.span.avia-menu-fx {
min-height: 500px;
background-image: url(http://185.56.84.140/~ptminet/wp-content/uploads/2016/11/nav-hover.png);
}Thanks for the help so far!
Hi,
try adding this code inside Quick CSS field:
.header-mountains img { position: relative; top: 15px; }I can see your mountan as a highlight indicator just fine: http://imgur.com/a/XlaWF
Best regards,
AndyIt’s working on old site but not the new one using enfold. Sorry for the confusion. This will make my previous comment make more sense if you read through it again.
Hi,
the same code should work on your new site. Make sure you’re not using any caching. Clear browser cache and hard refresh a few times. Send us admin access if it’s still not working for you.
Best regards,
AndyOk cool, that fixed the gap. So now when the page is shrunk down horizontally and the site goes into mobile mode, the same image doesn’t stay aligned to the bottom of the header. It rises up like it is attached to the logo above it.
Hi,
for mobile you need to take the same code I’ve provided to you and wrap media queries around it, like this:
@media only screen and (max-width: 736px) { .header-mountains img { position: relative; top: 15px; }}Adjust media queries as needed. For more infos: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Best regards,
AndyThis doesn’t achieve anything, the mountains go back to floating, then only sit right when below x pixel value until the page is scrunched up again at which point the mountains rise up. We need a way to lick the mountains to the bottom of the .top-header without them following up the logo as the logo shrinks in size.
If you shrink the window to be very tall and thin you will see what the mountains do.
Hi,
not sure what you’re talking about, as I can’t see any shrinking logo at all. Please provide screenshots showing the issue.
Best regards,
AndySorry, here you go.
The black mountains above the menu look great when site isn’t too narrow: http://d.pr/i/jKEQ
As the site shrinks, the mountains fill the width of .top-header: http://d.pr/i/atCV
Beyond this, the mountains stay the same number of PX below the logo and lift off the bottom of the section: http://d.pr/i/wX0k
The gap increases the thinner it gets: http://d.pr/i/3b1m
Hey!
We need a way to lick the mountains to the bottom of the .top-header without them following up the logo as the logo shrinks in size.
I’m sorry but what do you mean by “lick the mountains to the bottom of the .top-header “? If you want the vertical alignment of the logo to be at the bottom of the top-header container, please try this css code.
.top-header { min-height: 500px; background-image: url(https://www.ptmi.net/wp-content/themes/pacifictrail/assets/images/header.jpg); background-size: cover; position: relative; } .top-header-logo { text-align: center; padding: 50px 0; display: block; bottom: 0; position: absolute; }These css declarations exist in the style.css file, I just added a few css properties. Use a css media query if you want to apply it on smaller screens.
Best regards,
Ismael
- You must be logged in to reply to this topic.