Ecommerce Shopify WordPress Discussion

How to make a full screen on shopify

I am reaching out for guidance regarding a specific configuration I'm aiming to implement on my Shopify platform. My objective is to create a homepage featuring a full-screen image while retaining the visibility of a transparent menu. Additionally, I am looking to integrate a noticeable announcement bar on the same page. I possess a visual example of the desired layout, which I'm eager to share with you for inspiration. I would greatly appreciate any assistance, recommendations, or resources that could assist me in achieving this setup within Shopify. Thank you sincerely for your time and consideration in offering your expertise to aid me in this pursuit. Warm regards, My objective is to create a captivating homepage with a full-screen image, maintaining a transparent menu's visibility, and integrating a noticeable announcement bar on the same page. I possess a visual example of the desired layout, which I'm eager to share with you for inspiration. I would greatly appreciate any assistance, recommendations, or resources that could assist me in achieving this setup within Shopify. Thank you sincerely for your time and consideration in offering your expertise to aid me in accomplishing this objective. Image full screen(2)here Image of the full screen
I have crafted a solution that aligns with your requirements for a full-screen image with a transparent header menu and an eye-catching announcement bar. $(function() { $(document).on('click','a.page-scroll',function(event){ var $anchor=$(this); $('html,body').stop().animate({ scrollTop: ($($anchor.attr('href')).offset().top-45) },1500,'easeInOutExpo'); event.preventDefault(); }); }); $(window).scroll(function() { if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/ { $('.opaque-navbar').addClass('opaque'); } else { $('.opaque-navbar').removeClass('opaque'); } }); body,html{ font-family: 'Josefin Sans', sans-serif; } section{ background:yellow; } .banner{ width:100%; background:url('https://images.unsplash.com/photo-1528882548640-a4ce3912475e?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNjY0Njc0Mg&ixlib=rb-1.2.1&q=85') no-repeat; background-size:cover; background-position:center; min-height:600px; } .banner h3{ text-align:center; margin-top: 200px; color:#fff; font-size:80px; font-weight:700; font-family: 'Josefin Sans', sans-serif; } .banner p{ text-align:center; color:#fff; font-size:1.3em; opacity:1; font-family: 'Josefin Sans', sans-serif; } .opaque-navbar .container .navbar-header >a{ color:#fff; text-transform:uppercase; font-weight:bold; } .opaque-navbar .container .navbar-collapse >ul >li >a{ color:#fff; text-transform:uppercase; font-weight:700; } .opaque-navbar{ background-color:rgba(0,0,0,0); border-bottom:1px solid #eee; transition : background-color 0.5s ease 0s; } .opaque-navbar.opaque { background-color:black ; border:0px; transition: background-color .5s ease 0s; } ul.dropdown-menu { background-color: black; } .abt{ text-align:center; } .abt .jumbotron { background-color:#e67e22; } .abt h3{ color:white; font-size:40px; } hr{ width:100px; border-width:3px; } .abt p{ color: rgba(255, 255, 255, 0.7); font-size:20px; } .btn{ border:none; border-radius:300px; font-weight:bold; text-transform:uppercase; } .btn-default{ padding-bottom: 15px; padding-top:15px; padding-left:30px; padding-right:30px; } .no-padding{ padding:0; margin-top:-30px; } .col-6{ padding: 0 0; } .no-padding h1{ padding-top:55px; text-transform:uppercase; } .no-padding hr{ border: 2px solid #d0d0d0; } .bg-dark{ background-color:#222222; color:white; } .primary{ border:1px solid #d35400; } .my-font{ font-size:20px; } .bg-dark{ padding-top:55px; padding-bottom:30px; } .padded{ padding-top:200px; } .padded .col-lg-4 a{ color:#d35400; font-weight:bold; } .list-icon{ list-style-type:none; text-decoration:none; } .list-icon li{ display:inline; padding-right:20px; } .list-icon .fa{ font-size:40px; } @media (max-width: 992px) { body { background:white; } .opaque-navbar { background-color: black; height: 60px; transition: background-color .5s ease 0s; } } <div class="navbar navbar-inverse navbar-fixed-top opaque-navbar"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNav"> <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i> </button> <a class="navbar-brand page-scroll" href="#">Manas</a> </div> <div class="collapse navbar-collapse" id="myNav"> <ul class=" nav navbar-nav pull-right"> <li><a href="#about" class="page-scroll">About</a></li> <li><a href="#portfolio" class="page-scroll">Portfolio</a></li> <li><a href="#contact" class="page-scroll">Contact</a></li> </ul> </div> </div> </div> <section class="banner"> <div class="container"> <h3>Graphic & Web Designer</h3> <p>A Full Stack Developer, Based in XXXXXX. <br/> </p> </div> </section> <div class="abt" id="about"> <div class="jumbotron"> <div class="container"> <h3>We Have What You Need</h3> <hr></hr> <p>From a responsive Front End design to a Dynamic Backend handling,<br/> we provide you with your dream site and increase your chance of success.</p> <a href="#portfolio" class="btn btn-default">Get Started!</a> </div> </div> </div> <!--End ofAbout--> <!--PortFolio--> <div class="no-padding text-center" id="portfolio"> <div class="container"> <h1>Portfolio</h1> <hr></hr> </div> <div class="container-fluid"> <div class="row no-gutter"> <div class=" col-6 col-lg-4 col-sm-6"> <img src="http://4.bp.blogspot.com/-bahoT9-tRn4/UYQmxSCtFdI/AAAAAAAAA6s/QQzILTQba18/s1600/art-camera-cool-photography-toy-Favim.com-446299.jpg" class="img-thumbnail" alt="Project-1" width="100%" height="auto"> </div> <div class="col-6 col-lg-4 col-sm-6"> <img src="http://4.bp.blogspot.com/-bahoT9-tRn4/UYQmxSCtFdI/AAAAAAAAA6s/QQzILTQba18/s1600/art-camera-cool-photography-toy-Favim.com-446299.jpg" class="img-thumbnail" alt="Project-1" width="100%" height="auto"> </div> <div class="col-6 col-lg-4 col-sm-6"> <img src="http://4.bp.blogspot.com/-bahoT9-tRn4/UYQmxSCtFdI/AAAAAAAAA6s/QQzILTQba18/s1600/art-camera-cool-photography-toy-Favim.com-446299.jpg" class="img-thumbnail" alt="Project-1" width="100%" height="auto"> </div> </div> <div class="row no-gutter"> <div class=" col-6 col-lg-4 col-sm-6"> <img src="http://s9.favim.com/orig/130725/photography-pocket-watches-v-vintage-Favim.com-801353.jpg" alt="Project-1" width="100%" height="auto"> </div> <div class="col-6 col-lg-4 col-sm-6"> <img src="http://s9.favim.com/orig/130725/photography-pocket-watches-v-vintage-Favim.com-801353.jpg" class="img-thumbnail" alt="Project-1" width="100%" height="auto"> </div> <div class="col-6 col-lg-4 col-sm-6"> <img src="http://s9.favim.com/orig/130725/photography-pocket-watches-v-vintage-Favim.com-801353.jpg" alt="Project-1" width="100%" height="auto"> </div> </div> </div> </div> <!--End of Portfolio--> <div class="contact" id="contact"> <div class="bg-dark"> <div class="container" > <div class="row"> <div class="col-lg-8 col-lg-offset-2 text-center"> <h1>Let's Get In Touch!</h2> <hr class="primary"></hr> <p class="my-font">Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!</p> </div> <div class="padded"> <div class="col-lg-4 col-lg-offset-2 text-center"> <i class="fa fa-phone fa-3x sr-contact"></i> <p>9999999999</p> </div> <div class="col-lg-4 text-center"> <i class="fa fa-envelope-o fa-3x sr-contact"></i> <p><a href="mailto:your-email@your-domain.com">gfgfgfg@gmail.com</a></p> </div> </div> </div> </div> </div> </div> <!--End Of Contact--> <footer class="footer"> <div class="container"> <div class="row"> <div class="col-sm-6 text-center"> <h3>About this Page</h3> <p>Used:Bootstrap,Jquery,HTML,CSS.<br/> Made By: Manas Yadav</p> </div> <div class="col-sm-6 text-center"> <h3>Around The Web</h3> <ul class="list-icon"> <li><a type="button" href="https://www.facebook.com/manas.yadav.71"><i class="fa fa-facebook-official"></i></a> <li><a type="button" href="https://github.com/manas2297"><i class="fa fa-github-square" aria-hidden="true"></i></a> <li><a type="button" href=""><i class="fa fa-google-plus-official" aria-hidden="true"></i></a> </ul> </div> </div> </div> </footer> Run code snippetExpand snippet

December 29, 2023

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.