Home Forums Pro Themes Education Hub Pro Full width header image

Tagged: 

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #18347
    mlevine3@esu.edu
    Participant

    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.

    http://quantum.esu.edu/test_theme/

    #18372
    wensolutions
    Keymaster

    Hello @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!!!

    #18472
    mlevine3@esu.edu
    Participant

    I 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.

    http://quantum.esu.edu/test_theme/

    #18474
    mlevine3@esu.edu
    Participant

    Also the image does not fill entire space.

    #18475
    mlevine3@esu.edu
    Participant

    How 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;
    }

    #18510
    mlevine3@esu.edu
    Participant

    I just noticed that the gold color on the caption changes color on mobile view, but not on desktop.

    #18559
    wensolutions
    Keymaster

    Hello @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!!!

    #18590
    mlevine3@esu.edu
    Participant

    I 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.

    #18591
    mlevine3@esu.edu
    Participant

    I 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.

    #18687
    wensolutions
    Keymaster

    Hello @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!!!

    #18817
    mlevine3@esu.edu
    Participant

    I 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.

    http://quantum.esu.edu/test_theme/

    #18848
    wensolutions
    Keymaster

    Well, 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.

    #18853
    mlevine3@esu.edu
    Participant

    I appreciate your quick turn around but the image still does not go side-to-side.

    #18864
    wensolutions
    Keymaster

    Hello @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!!!

    #18952
    mlevine3@esu.edu
    Participant

    Interesting? 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.

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.