Seeking help with my design flaws, I have created a fiddle to showcase the issues that arise when attempting to make it responsive. The main problem is that the HEADING IN CENTER text is not aligned properly in the center. If I remove the position attribute, the text aligns but loses its white color due to the overlay used. Additionally, clicking on the hamburger icon reveals excessive white space at the top of the page. How can these issues be resolved?
The framework used is Semantic UI.
html
<div class="ui grid nav">
<div class="computer tablet only row computer-menu">
<div class="ui inverted text fixed menu navbar page grid">
<a href="" class="brand item">LOGO</a>
<div class="right menu open">
<a href="" class="menu item">
<i class="content icon"></i>
</a>
</div>
</div>
<div class="ui vertical navbar menu">
<a href="" class="active item">Home</a>
<a href="" class="item">Blog</a>
<a href="" class="item">Discussion</a>
</div>
</div>
<div class="mobile only row mobile-menu">
<div class="ui inverted fixed navbar text menu">
<a href="" class="brand item">LOGO</a>
<div class="right menu open">
<a href="" class="menu item">
<i class="content icon"></i>
</a>
</div>
</div>
<div class="ui vertical navbar menu">
<a href="" class="active item">Home</a>
<a href="" class="item">Blog</a>
<a href="" class="item">Discussion</a>
</div>
</div>
</div>
<div class="ui main-segment">
<section class="home-header show">
<div class="overlay"></div>
<div class="short-intro">
<h1>HEADING IN CENTER</h1>
</div>
<div class="invitation">
</div>
</section>
</div>
css
body {
background: #e8e8e8;
}
.ui.inverted.menu{
background: transparent !important;
}
@media (max-width: 767px) {
.ui.grid.main{
margin-top: 70px;
}
.ui.grid { margin: 0 !important; }
.ui.vertical.menu.navbar{
margin-top: 0px !important;
}
}
.main-segment{
padding: 0 !important;
}
.ui.vertical.menu{
margin-top: 45px !important;
width: 100%;
display: none;
background: rgb(32, 85, 109);
}
.vertical.menu a.item{
color: #fff !important;
}
.computer-menu, .mobile-menu{
padding-bottom: 0 !important;
}
.ui.grid+.grid {
margin-top: 0 !important;
}
.ui.menu {
font-size: 2rem;
text-align: center;
}
.ui.grid.nav>.row{
padding: 0 !important;
}
/* */
.ui.grid>*{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* MENU */
.menu {
float: right;
}
section.home-header.show {
background: url('http://www.ics.com/sites/default/files/iot.jpg') center;
}
section.home-header {
background: #000;
background-size: cover;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
z-index: 1;
-moz-transition: 2s background-color;
-o-transition: 2s background-color;
-webkit-transition: 2s background-color;
transition: 2s background-color;
}
.overlay {
position: absolute;
z-index: 2;
background: url(../img/pattern.png),rgba(0,0,0,.5);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
request-invitation {
background: #fff;
z-index: 100;
width: 25%;
position: absolute;
top: 50%;
padding: 25px;
color: rgba(27, 28, 29, 0.77);
text-decoration: underline;
}
.short-intro {
color: #fff;
position: absolute;
z-index: 100;
font-weight: 900;
text-align: center;
margin: 10em 20em;
/* left: 50%; */
}
.short-intro h1 {
font-size: 4em;
}
Access the jsfiddle link here.
UPDATE
An amendment has been made in the CSS code where .connyct-short-intro was changed to .short-intro. You can view the updated fiddle to observe that text alignment is possible using position: absolute for maintaining the white color scheme.