How to make a full screen on shopify

Question

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

Answer 1

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:[email protected]">[email protected]</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>