Home › Forums › Pro Themes › Education Hub Pro › Full width header image
Tagged: header image
- This topic has 20 replies, 2 voices, and was last updated 8 years, 2 months ago by mlevine3@esu.edu.
-
AuthorPosts
-
September 21, 2016 at 11:10 am #18347mlevine3@esu.eduParticipant
I am using an image width of 1420, but it does not go full width like your demo. I would like a single image with the caption option if possible.
September 21, 2016 at 11:58 pm #18372wensolutionsKeymasterHello @mlevine3@esu.edu
I am using an image width of 1420, but it does not go full width like your demo.
For your information, the image shown in the demo is of slider and the image seen in you site is of header image.
Now to make header image of full width you need to add custom CSS.
For this you need to go to Admin Panel / Appearance / Customize / Theme Options / Advanced Options.Here copy and paste below CSS.
#masthead { background-position: inherit; }
I would like a single image with the caption option if possible.
Now the image you are seeing in the demo is of featured slider with caption. You currently don’t have option of header image with caption.
However you can try adding the slider.
You will find option for slider when you go to Admin Panel / Appearance / Customize / Featured Slider.
In this section you will see different option for slider.
Hope this will help to resolve your issue.
Regards!!!
September 22, 2016 at 10:20 am #18472mlevine3@esu.eduParticipantI have the single image set for the slider. However the image is displaying below the navigation and I now have a big white space above the navigation.
September 22, 2016 at 10:56 am #18474mlevine3@esu.eduParticipantAlso the image does not fill entire space.
September 22, 2016 at 11:01 am #18475mlevine3@esu.eduParticipantHow do you change the gold color on the right side of the caption? I tried this CSS, but didn’t work.
#main-slider .cycle-caption {
border-right: 8px solid #bd2925 !important;
}September 22, 2016 at 1:09 pm #18510mlevine3@esu.eduParticipantI just noticed that the gold color on the caption changes color on mobile view, but not on desktop.
September 23, 2016 at 12:24 am #18559wensolutionsKeymasterHello @mlevine3@esu.edu
You have that huge space in the header because previously you have header image in that section. If you have removed the header image and placed the slider instead then you need to remove the previously given CSS for the header image to adjust it.
And the slider image doesn’t fit the entire space because of smaller image height. Slider height automatically adjust with the height of the image uploaded.
The recommended side of the image for slider is Slider Image : 1420px X 550px just below to place where you Set Featured Image.
Please try uploading the image of recommended size this will fix the issue.And to change the gold color as you are referring you need to go to Admin Panel / Appearance / Customize / Theme Options / Advanced Options.
Here paste the below CSS.#main-slider .cycle-caption { border-right: 8px solid #BD2925; }
If you have any confusion the please let us know.
Regards!!!
September 23, 2016 at 8:23 am #18590mlevine3@esu.eduParticipantI increased the size of the image and removed the CSS and it still does not go full width. Also the nav bar is still above the image, I would like it below the image.
September 23, 2016 at 8:29 am #18591mlevine3@esu.eduParticipantI am already using the CSS
#main-slider .cycle-caption {
border-right: 8px solid #BD2925;
}The gold color only changes read on mobile not on desktop. I even tried adding !important.
September 24, 2016 at 11:51 pm #18687wensolutionsKeymasterHello @mlevine3@esu.edu
Ok to fix the issue of image width you need to add below CSS.
img { margin: 0 auto; }
As far as we have inspected your site we don’t see the given CSS to change the gold color of slider caption.
May be you have remove after not working so please keep the CSS so that we can debug the issue.And for nav bar above the image, the theme’s default design is such that the navigation menu appears above the slider ( As you can see the demo of the theme http://demo.wenthemes.com/education-hub-pro/ ). If you want the nav below the image you need to create child theme and do some customization.
We would provide you some hint if are willing so.Hope you understand.
Best Regards!!!
September 26, 2016 at 9:24 am #18817mlevine3@esu.eduParticipantI decided to go back to the header image instead of the slider because I prefer the navigation on the bottom of the image. With that said, I still have white space on both sides of the image.
September 26, 2016 at 12:47 pm #18848wensolutionsKeymasterWell, may be you forgot to mention us that you are viewing your site in something high resolution sized screen and that white spaces are appearing on either sides of the header image.
Anyways, assuming this scenario you can paste this following custom CSS code to fit to the entire screen from left – right.
#masthead{ background-size: cover; }
Hope this will help you.
September 26, 2016 at 4:24 pm #18853mlevine3@esu.eduParticipantI appreciate your quick turn around but the image still does not go side-to-side.
September 26, 2016 at 11:55 pm #18864wensolutionsKeymasterHello @mlevine3@esu.edu
We don’t see any of the CSS that we have provided to you to add in Custom CSS as we have inspected your above given site URL.
Please go to Admin Panel / Appearance / Customize / Theme Options / Advanced Options.
Here copy and paste the below CSS.And don’t remove it until the solution is resolved, cause we need to know the cause for the CSS not working.
#masthead { background-position: inherit; }
Hope this will help you to resolve the issue.
Regards!!!
September 27, 2016 at 8:03 am #18952mlevine3@esu.eduParticipantInteresting? I have been using a CSS plugin (Simple Custom CSS), which I use often on sites. I took your last 2 CSS suggestions
#masthead{
background-size: cover;
}
#masthead {
background-position: inherit;
}and placed them in your Advanced Options and they worked, crazy.
-
AuthorPosts
- You must be logged in to reply to this topic.