How to make fixed top menu in Semantic-UI not cover content

Question

I have a problem with my fixed-top menu in semantic-ui. It's covering a header element, which says "This is Stoga Hub". I don't think javascript or jQuery will do anything to help. I've tried messing around with margin-top/bottom for the menu and header elements and it worked, but I know my code will become really messy if I have to adjust the margin-top/bottom on every single webpage. I apologize if this has a really simple answer, I'm still very new to website building. Thank you all for your help.

 var main = function() { $('.ui.dropdown').dropdown({ on: 'hover' }); $('.item').click(function() { $('.item').removeClass('active'); $(this).toggleClass('active'); }); $('.ui.checkbox') .checkbox(); }; $(document).ready(main); 

 .main { height: 600px; background: linear-gradient(to right, #16a085, #2c3e50); position: absolute; /*margin-top: 78px;*/ } .ui.header { font-size: 65px; } body { background-color: #ecf0f1; color: white; } .segment { background-position: 50% 50%; margin: auto; } .menu { padding-top: 8px; padding-bottom: 8px; color: maroon; position: relative; /*margin-bottom: 62px;*/ } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Menu --> <div class="ui large top fixed transparent menu"> <div class="ui container"> <a class="active item">"Logo"</a> <div class="ui dropdown item"> <div class="text">Members</div> <i class="dropdown icon"></i> <div class="menu"> <a class="item" href="http://tesd.net/stoga">CHS Website</a> <a class="item" href="http://stogamusic.com">Stoga Music</a> <a class="item" href="http://stoga.net">Stoga Library Index</a> <a class="item" href="http://spoke.news">Spoke News</a> </div> </div> <div class="ui dropdown item"> <div class="text">Clubs</div> <i class="dropdown icon"></i> <div class="menu"> <a class="item" href="../Main%20Files/clubs.html">Club List</a> <a class="item">Register a Club</a> </div> </div> <div class="ui dropdown item"> <div class="text">Useful Stuff</div> <i class="dropdown icon"></i> <div class="menu"> <a class="item" href="https://pinnacle.tesd.net/Pinnacle/PIV/Logon.aspx?ReturnUrl=%2fPinnacle%2fPIV%2fDefault.aspx">Pinnacle</a> <a class="item" href="https://connection.naviance.com/family-connection/auth/login/?hsid=conestoga">Naviance</a> </div> </div> <div class="ui dropdown item"> <div class="text">About</div> <i class="dropdown icon"></i> <div class="menu"> <a class="item" href="../Main%20Files/whoWeAre.html">Who We Are</a> <a class="item" href="../Main%20Files/Calendar.html">Calendar</a> <a class="item" href="../Main%20Files/contact.html">Contact Us</a> </div> </div> <div class="right menu"> <a class="item"><i class="sign in icon"></i>Login</a> </div> </div> </div> <div class="ui fluid main container"> <div class="segment"> <div class="ui container"> <h1 class="ui header">This is Stoga Hub</h1> </div> </div> </div> 

Answer 1

I think that the easiest way might be padding-top:

.main.container {
    padding-top: 100px;
}

JS Fiddle link

Answer 2

I see you tried a margin-top on main. Try "top: 78px" instead because it's absolutely positioned. If you always have a segment with text at the top, you can also try

.segment {
    margin: 100px auto 0;
}

which would add extra margin to the top of the segment so the text isn't pressed up against the header. (Margins with "auto" only work on the sides, not top and bottom.) You can use "padding-top" inside the .main or .segment too.