Home Forums EZY Template responsive backgroun

This topic contains 9 replies, has 3 voices, and was last updated by  Support2 1 week, 4 days ago. This post has been viewed 81 times

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #10030597

    merdjpatts
    Participant

    Hello,

    My issue is I need to create a website with a responsive background. I downloaded a copy of your template and tried to the background responsive, using ‘img-fluid’ does not work. For me it does not matter how small might be the screen in mobile devices as long as I will be able to meet that criteria in my website.

    I am to create a site so at this moment no sample site yet available.

    thank you and looking forward hearing from you soon.


    #10030599

    Support
    Keymaster

    Hello, thanks for your purchase.

    Regarding that background, we are still a little confused about that, where exactly it would be? It would be an image in the page content or a background in the page itself?

    If it’s just an image in the page, you might take a look in these samples: https://preview.oklerthemes.com/ezy/1.1.0/elements-image-frames.html

    Please let me know if you need any other help.

    Kind Regards,

    Jonas


    #10030601

    merdjpatts
    Participant

    Hello Sir,

    just for clarification. What I need exactly is I want a sliding background to be responsive so that when the user visit the site using their mobile devices the background image should be also small. presently, the image in the background does not display all area instead it shows some part of the background image.

    I hope this is clear now.

    thank you


    #10030602

    Support
    Keymaster

    Hi,

    What is not clear for us is that if you want:

    1) The slider (Responsive Slider) with the responsive background image. See first slider: https://preview.oklerthemes.com/ezy/1.1.0/multi-purpose-1.html

    2) Content Image: https://getbootstrap.com/docs/4.3/content/images/

    3) Section Background: https://preview.oklerthemes.com/ezy/1.1.0/elements-sections-parallax.html

    If you could point with a screenshot which area of your site you are working, or just send us the URL so we can make more tests would be great.

    Thanks.


    #10030603

    merdjpatts
    Participant

    pls send me your email address and will show to you how it looks in mobile and in desktop version?


    #10030606

    Support
    Keymaster
    This reply has been marked as private.
    #10030615

    merdjpatts
    Participant

    hello sir,

    I think I found one sample from your product Multi-purpose sample 12. it seems this fits my need. I will explore and I will let you know if it ok with me.

    thank you so much for your kind help.

    Appreciated.


    #10030627

    Support2
    Keymaster

    Hello,

    Great!

    If you need further assistance feel free to contact us.

    Kind Regards,

    Rodrigo.


    #10030633

    merdjpatts
    Participant

    it is working good now, what i need now is how to change the burger color to other color and background to transparent. secondly, I need to change the hover color for header menu. can you tell me where can I change in the css? or css code to replace it rather than replacing the main css?

    thank you so much for your kind help.


    #10030642

    Support2
    Keymaster

    Hello,

    Supposing you are using the multi-purpose-12.html as base.

    1) To change the header background to transparent, just change the header class to:

    <header id="header" class="header-transparent"

    2) To change the hamburguer mobile menu button color:
    header-btn-collapse-nav-dark this class will turn the hamburguer dark
    header-btn-collapse-nav-light this class will turn the hamburguer light
    on-sticky-light this class will turn the hamburguer light when sticky active (scroll down)
    on-sticky-dark this class will turn the hamburguer darkwhen sticky active (scroll down)

    Example of usage:

    <button class="header-btn-collapse-nav header-btn-collapse-nav-dark on-sticky-light ml-3" data-toggle="collapse" data-target=".header-nav-main nav">
    	<span class="hamburguer">
    		<span></span>
    		<span></span>
    		<span></span>
    	</span>
    	<span class="close">
    		<span></span>
    		<span></span>
    	</span>
    </button>

    3) To change the header menu color on hover, add in (css/custom.css):

    /* Changes the header menu items color when hover */
    #header .header-nav-main nav > ul > li:hover > a {
        color: red !important;
    }
    
    /* Changes the header menu item active color */
    #header .header-nav-main nav > ul > li > a.active {
        color: red !important;
    }

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


Viewing 10 posts - 1 through 10 (of 10 total)