Header Bar - FREE CREDITS!

10-06-2015, 07:07 PM

Tropical Wrote: The main header :

Code:

<div class="top_panel">

<div>

{$welcomeblock}
</div>

</div>


<div class="header">

<a href="index.php" class="logo_link">
<span class="inifinity_symbol">
<span><span></span></span>
<span><span></span></span>
</span>

<span class="logo">Gaming<span>Talks</span>
<span>Taking gaming to a chill vibe</span>
</span>
</a>

<div class="header_search">
<form method="post" action="search.php">
<input type="hidden" name="action" value="do_search"/>
<input type="hidden" name="postthread" value="1"/>
<input type="hidden" name="forums" value="all"/>
<input type="hidden" name="showresults" value="threads"/>
<input type="text" class="textbox" name="keywords" value="Search..." onfocus="if(this.value == 'Search...') { this.value=''; }" onblur="if(this.value == '') { this.value='Search...'; }" />
<button type="submit" class="login_button"><i class="icon-search"></i></button>
</form>
</div>

</div>


<div class="container">

<ul class="nav_menu clearfix">
<li><a href="index.php"><i class="icon-home"></i>Home</a></li>
<li><a href="memberlist.php"><i class="icon-globe"></i>Members</a></li>
<li><a href="myawards.php"><i class="icon-trophy"></i>Awards</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?page=upgrade"><i class="icon-usd"></i>Upgrade</a></li>
<li><a href="search.php"><i class="icon-search"></i>Search</a></li>
<li><a href="misc.php?action=help"><i class="icon-question"></i>Help Docs</a></li>
<li><a href="newpoints.php"><i class="icon-circle"></i>Points</a></li>


<li style="float:right"><a href="javascript:;"><i class="icon-anchor"></i>New content</a>

<ul class="nav_submenu">
<li><a href="{$mybb->settings['bburl']}/search.php?action=getnew"><i class="icon-eye"></i>View New Posts</a></li>
<li><a href="{$mybb->settings['bburl']}/search.php?action=getdaily"><i class="icon-clock-o"></i>View Today's Posts</a></li>
</ul>
</li>
</ul>


<div class="content">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
<navigation>

The CSS:

Code:

.nav_menu {
border-radius:2px 2px 0px 0px;
padding:0;
margin:0;
list-style:none;
display:block !important;
}

.nav_menu > li {
float:left;
position:relative;
}

.nav_menu > li > a {
display:block;
color:#f5f5f5;
text-align:center;
padding:12px 11px;
border-right: 1px solid rgba(0, 0, 0, 0.200);
border-left: 1px solid rgba(255, 255, 255, 0.060);
}


.nav_menu > li > a > i {
margin-right:7px;
width:26px;
padding:5px 0px;
text-align:center;
border-radius:2px;
background-color:rgba(0, 0, 0, 0.600);
vertical-align:middle;
}

.nav_menu > li:first-child > a {
border-left:none;
}
.nav_menu > li > a:hover, .nav_menu > li > a.active {
background-color:rgba(0, 0, 0, 0.200);
}

.nav_menu > li:last-child > a {
border:none;
}

.nav_menu > li:hover .nav_submenu {
display:block;
}

.nav_submenu {
position:absolute;
list-style:none;
margin:0;
right:0;
display:none;
z-index:999;
padding:0;
border:1px solid #171717;
background-color:#191919;
}

.nav_submenu > li {
min-width:160px;
}

.nav_submenu > li > a{
  display:block;

  padding:9px 11px;
  color:#f5f5f5;
  font-size:12px;
  white-space: nowrap;
}

.nav_submenu > li > a > i {
font-size:15px;
vertical-align:middle;
margin-right:8px;
display:inline-block;
}


.nav_submenu > li > a:hover {
background-color:#212121;
}

Eh, kinda displays messed up.

I'll see if I can fix it somehow.