Community Forums › Forums › Archived Forums › Design Tips and Tricks › Fixed top bar in Centric Pro
- This topic has 4 replies, 2 voices, and was last updated 8 years, 1 month ago by rubenvillarnet.
-
AuthorPosts
-
March 19, 2016 at 2:42 pm #181880rubenvillarnetMember
Hi i´m creating a site for a client with Genesis + Centric Pro.
He wants a fixed top bar with info (email, phone, social media...) in addition to the site header.I have tried it with plugins and following this tutorial, but unsuccessfully.
Has anyone achieved something similar?
Thanks for your help,
Rubén
March 20, 2016 at 5:52 am #181907Victor FontModeratorThis site is still under development, but is this what you want to achieve? http://181.224.139.133/~coachsoa/dev1/
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?March 20, 2016 at 6:02 am #181908rubenvillarnetMemberYeah, that´s the thing.
I see you´re using Epik Theme, has it the top header included?
March 20, 2016 at 6:41 am #181911Victor FontModeratorNo. Epik doesn't have that top header. It's a custom feature that I added. if you don't want to mess with functions.php, I suggest you install the Genesis Simple Hooks plugin. This is the code I wrote for the Coach's Oats site's functions.php. The CSS follows.
// Before Header Wrap add_action( 'genesis_before_header', 'before_header_wrap' ); function before_header_wrap() { echo '<div class="head-wrap"> <div class="top-header"> <div class="one-half first top-header-icon"> <a class="top-header-link" href="tel:7146926885"><i class="fa fa-phone"></i> (714) 692-6885</a> <a class="top-header-link" href="mailto:[email protected]"><i class="fa fa-envelope"></i>[email protected]</a> <a class="top-header-social" href="http://www.facebook.com/pages/Coachs-Oats/60515309978" target="_blank"><i class="fa fa-facebook"></i></a> <a class="top-header-social" href="http://twitter.com/coachsoats" target="_blank"><i class="fa fa-twitter"></i></a> <!-- <a class="top-header-social" href="https://plus.google.com/118005185033742732905" target="_blank"><i class="fa fa-google-plus"></i></a> --> <a class="top-header-social" href="http://pinterest.com/coachsoats/" target="_blank"><i class="fa fa-pinterest-p"></i></a> <a class="top-header-social" href="https://instagram.com/coachsoats/?" target="_blank"><i class="fa fa-instagram"></i></a> </div> <div class="one-half">'; if ( has_nav_menu( 'top-header' ) ) { /* if menu location 'primary-menu' exists then use custom menu */ wp_nav_menu( array( 'theme_location' => 'top-header') ); } echo ' </div> <div class="first"></div> </div>'; } // After Header Wrap add_action( 'genesis_after_header', 'after_header_wrap' ); function after_header_wrap() { echo '</div>'; }
And the CSS:
/* Site Header ---------------------------------------------------------------------------------------------------- */ .top-header { height: 34px; padding: 6px; font-size: 13px; color: rgba(163,92,0,0.76); /* font-weight: 600; */ text-align: center; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffd700+0,fff3bc+100,ccad00+100 */ background: #F5DC89; /* Old browsers */ /* background: -moz-linear-gradient(top, #ffd700 0%, #fff3bc 100%, #ccad00 100%); */ /* FF3.6-15 */ /* background: -webkit-linear-gradient(top, #ffd700 0%,#fff3bc 100%,#ccad00 100%);*/ /* Chrome10-25,Safari5.1-6 */ /* background: linear-gradient(to bottom, #ffd700 0%,#fff3bc 100%,#ccad00 100%);*/ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd700', endColorstr='#ccad00',GradientType=0 );*/ /* IE6-9 */ /* border-bottom: 5px solid #ffd700;*/ } .top-header-link, .top-header-social { color: rgba(163,92,0,0.76) !important; /* font-weight: 600; */ } .top-header-link { margin-right: 1em; } .top-header-icon > a i { font-size: 13px; padding-right: 7px; } .head-wrap { background: #050032; margin: 0 0 40px; position: fixed; left: 0; z-index: 999; width: 100%; max-height: 118px; font-weight: 100 !important; /* border-bottom: 5px solid #ffd700; */ } body.admin-bar .head-wrap { top: 32px; } .site-header { margin: 0 auto; /* max-width: 1140px; */ max-width: 100%; height: 84px; } .site-logo { margin: 20px 30px; } .site-header .wrap { /* padding: 16px 0; */ max-width: 100%; }
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?March 20, 2016 at 6:42 am #181912rubenvillarnetMemberOk, I will give it a try, thanks a lot!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.