Home › Forums › Pro Themes › Education Hub Pro › Align and fix header image with first menu item
Tagged: header image, logo, site title
- This topic has 4 replies, 2 voices, and was last updated 7 years, 9 months ago by wensolutions.
-
AuthorPosts
-
February 2, 2017 at 1:17 pm #30777DB4YParticipant
Hello,
I’d like to align my header image to be directly above my first menu item (Home). I want the image to stay fixed above the first menu item even when the window is minimized/resized. I also do NOT want to affect the position of the search box.
My website is: http://www.apgardnerposthamilton.org
Below is some custom CSS that I already have. (I want to keep the site identity margin to control the height of the header)
—-
@media(min-width:768px){
#site-identity {
margin-top: 80px;
}
#masthead {
background-position: left;}
}—-
February 2, 2017 at 6:07 pm #30804DB4YParticipantI have updated my css (unrelated to this issue) and posted the latest below.
Just to recap my issue… I want to move the header image to align with the first menu item without affecting the position of the search box. Using a margin-left attribute in #masthead moved the search box and the header still moves too much when the window is resized as well.
#site-identity {
margin-top:80px;
}
#masthead {
background-position:left;
}@media(max-width: 769px) {
.site-header {
min-height: 0px;
}#page #masthead {
padding-bottom: 0px;
}
}
@media only screen and (max-width: 479px) {
#page #masthead {
padding-top: 0px;
}
}February 3, 2017 at 2:18 am #30851wensolutionsKeymasterHello @DB4Y
To solve your issue using CSS is bit tedious so in order to solve the issue we prefer the child theme approach.
At first create the child theme . For creating the child theme you can refer to below link:
https://codex.wordpress.org/Child_Themes
You can also create the child theme using plugin. As there are many such plugin, below is one of them.
https://wordpress.org/plugins/wp-child-theme-generator/
After creating and activating the child theme paste below code in your child themes functions.php file.
function education_hub_header_start() { $extra_class = ''; ?> <div class="container"><div class="row"><header id="masthead" class="site-header" role="banner"> <?php } function education_hub_header_end() { ?></header><!-- #masthead --></div><!-- .row --></div><!-- .container --><?php }
Hope this helps.
If this does not solve your issue please let us know.
Best Regards!!
February 3, 2017 at 10:53 am #30898DB4YParticipantThis didn’t work. It actually messed around with my entire layout. Widgets were removed, the layout was changed, certain data was set to default, etc. When I deactivated the plugin and restored the regular pro theme the issues remained. I ended up having to restore a database backup to get my site back prior to the changes. Did I do something wrong? Anyhow, I’ll change my header image size to the recommended or just use the site logo/title instead. Thank you anyway.
February 4, 2017 at 8:28 am #30970wensolutionsKeymaster@db4y,
It would have really been easy to provide the direct solution if we could see the current issue in some form like screenshot or your site URL (currently seen in construction phase). We are finding our way to get straight to your issue in short time without waiting much time in issue understanding. Let us know how we can help you further.
Thank you.
-
AuthorPosts
- You must be logged in to reply to this topic.