- Messages
- 141
- Reaction score
- 30
- Points
- 38
Guys help naman po, yung isang sub navigation ko gusto ko sana di nakafix, I mean yung author navi dapat nagiscroll siya at hindi fix. Nasasama siya sa primary nav ko na nakafix eh.
Eto po CSS nung div na header wrapper
Thank you po!
Code:
<div id='header-wrapper-rec'>
<div class='margin-1200'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Quotes (Header)' type='Header' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block;padding-left:0px;padding-top:0px;'/>
</a>
</div>
<b:else/>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "px;" + "_height: " + data:height + "px;" + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'>
<span>
<data:description/>
</span>
</p>
</div>
</b:includable>
<b:includable id='title'>
<a expr:href='data:blog.homepageUrl'>
<data:title/>
</a>
</b:includable>
</b:widget>
</b:section>
<!--Top Responsive Menu-->
<div class='menu-secondary-container'>
<ul class='menus menu-secondary'>
<li>
<a href='#'>
Home
</a>
</li>
<li>
<a href='#>
Topics
</a>
</li>
<li><a href='#'>Authors</a>
</li>
<li><a href='#'>
Images
</a></li>
<li><a href='#'>
Videos
</a>
</li>
</ul>
</div>
<div id='nav-trigger'>
<span>
<i class='fa fa-list'/>
</span>
</div>
<nav id='nav-mobile'/>
<div class='header-search'>
<form action='/search' method='get' name='searchform'>
<input class='search-input' id='q' name='q' placeholder='Search for Quotes' type='text' value=''/>
<input class='search-button' type='submit' value='Search'/>
</form>
</div>
<!--Top Social Buttons-->
<span class='social'>
<li>
<a href='#' target='_blank'>
<i class='fa fa-facebook-square'/>
</a>
</li>
<li>
<a href='#' target='_blank'>
<i class='fa fa-pinterest-square'/>
</a>
</li>
<li>
<a href='#' target='_blank'>
<i class='fa fa-twitter-square'/>
</a>
</li>
</span>
<div style='clear:both;'/>
</div>
<!--Start Author Bar-->
<style>
.alp{background:#a96e50;height:28px;line-height:28px;text-align:center;}
.wrapper{background: #8e0f0f none repeat scroll 0 0;
height: 28px;
width: 100%;
}
.title-authors{ display: inline-block;}
.authors{margin: 0; padding: 0; display:inline-block;}
.authors li{text-align:center;list-style:none;display:inline-block;}
.authors li a{display:block;color:#f0d5c8;text-decoration:none;padding:0 0.4em;font-weight:700;}
.authors li a:hover{background:#c38363;}
.authors li.a:active{background:#c38363;}
.title-authors {color: #fff}
@media screen and (max-width: 720px) {
.author-bar {
visibility: hidden;
display: none;
}
}
</style>
<div class='author-bar'>
<div class='alp'>
<div class='wrapper'>
<div class='title-authors'>Authors:</div>
<ul class='authors'>
<li><a href='/quotes/authors/a/'>A</a></li>
<li><a href='/quotes/authors/b/'>B</a></li>
<li><a href='/quotes/authors/c/'>C</a></li>
<li><a href='/quotes/authors/d/'>D</a></li>
<li><a href='/quotes/authors/e/'>E</a></li>
<li><a href='/quotes/authors/f/'>F</a></li>
<li><a href='/quotes/authors/g/'>G</a></li>
<li><a href='/quotes/authors/h/'>H</a></li>
<li><a href='/quotes/authors/i/'>I</a></li>
<li><a href='/quotes/authors/j/'>J</a></li>
<li><a href='/quotes/authors/k/'>K</a></li>
<li><a href='/quotes/authors/l/'>L</a></li>
<li><a href='/quotes/authors/m/'>M</a></li>
<li><a href='/quotes/authors/n/'>N</a></li>
<li><a href='/quotes/authors/o/'>O</a></li>
<li><a href='/quotes/authors/p/'>P</a></li>
<li><a href='/quotes/authors/q/'>Q</a></li>
<li><a href='/quotes/authors/r/'>R</a></li>
<li><a href='/quotes/authors/s/'>S</a></li>
<li><a href='/quotes/authors/t/'>T</a></li>
<li><a href='/quotes/authors/u/'>U</a></li>
<li><a href='/quotes/authors/v/'>V</a></li>
<li><a href='/quotes/authors/w/'>W</a></li>
<li><a href='/quotes/authors/x/'>X</a></li>
<li><a href='/quotes/authors/y/'>Y</a></li>
<li><a href='/quotes/authors/z/'>Z</a></li>
</ul>
</div>
</div>
</div>
<!--End Author Bar-->
</div>Eto po CSS nung div na header wrapper
Code:
#header-wrapper-rec {
background: #a90909 none repeat scroll 0 0;
border-bottom: 5px solid #8e0f0f;
height: 50px;
position: fixed;
width: 100%;
z-index: 20;
}Thank you po!
Last edited:
