- This topic has 2 replies, 2 voices, and was last updated 10 years, 5 months ago by
. This post has been viewed 1522 times
Viewing 3 posts - 1 through 3 (of 3 total)
-
Posts
-
I’d like to replace the “About Us, Contact Us, (123) 456-7890, Search” on index-header-10 with the top colored bar as it appears on index-header-4 and have it remain as always sticky. In case I’m not being clear, another way to describe it is index-header-4 but with default navigation, always sticky like index-header-10. I am having no success so far. Can you help me accomplish this? Thanks.
Hello, great, so please try to use that markup:
HTML:
<header id="header" class="" data-plugin-options='{"alwaysStickyEnabled": true}'> <div class="header-top"> <div class="container"> <nav> <ul class="nav nav-pills nav-top"> <li> <a href="about-us.html"><i class="fa fa-angle-right"></i>About Us</a> </li> <li> <a href="contact-us.html"><i class="fa fa-angle-right"></i>Contact Us</a> </li> <li class="phone"> <span><i class="fa fa-phone"></i>(123) 456-7890</span> </li> </ul> </nav> <ul class="social-icons"> <li class="facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook">Facebook</a></li> <li class="twitter"><a href="http://www.twitter.com/" target="_blank" title="Twitter">Twitter</a></li> <li class="linkedin"><a href="http://www.linkedin.com/" target="_blank" title="Linkedin">Linkedin</a></li> </ul> </div> </div> <div class="container"> <div class="logo"> <a href="index.html"> <img alt="Porto" width="111" height="54" data-sticky-width="82" data-sticky-height="40" src="img/logo.png"> </a> </div> <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse"> <i class="fa fa-bars"></i> </button> </div> <div class="navbar-collapse nav-main-collapse collapse"> <div class="container"> <nav class="nav-main mega-menu"> <ul class="nav nav-pills nav-main" id="mainMenu"> <li class="dropdown active"> <a class="dropdown-toggle" href="#"> Home <i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li><a href="index.html">Home - Default</a></li> <li><a href="index-1.html">Home - Corporate <span class="tip">hot</span></a></li> <li><a href="index-2.html">Home - Color</a></li> <li><a href="index-3.html">Home - Light</a></li> <li><a href="index-4.html">Home - Video</a></li> <li><a href="index-5.html">Home - Video - Light</a></li> <li><a href="index-one-page.html">One Page Website</a></li> <li class="dropdown-submenu"> <a href="#">Sliders</a> <ul class="dropdown-menu"> <li><a href="index.html">Revolution Slider</a></li> <li><a href="index-slider-2.html">Nivo Slider</a></li> </ul> </li> </ul> </li> <li> <a href="shortcodes.html">Shortcodes</a> </li> <li class="dropdown"> <a class="dropdown-toggle" href="#"> About Us <i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li><a href="about-us.html">About Us</a></li> <li><a href="about-us-basic.html">About Us - Basic</a></li> <li><a href="about-me.html">About Me</a></li> </ul> </li> <li class="dropdown mega-menu-item mega-menu-fullwidth"> <a class="dropdown-toggle" href="#"> Features <i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li> <div class="mega-menu-content"> <div class="row"> <div class="col-md-3"> <ul class="sub-menu"> <li> <span class="mega-menu-sub-title">Main Features</span> <ul class="sub-menu"> <li><a href="feature-pricing-tables.html">Pricing Tables</a></li> <li><a href="feature-icons.html">Icons</a></li> <li><a href="feature-animations.html">Animations</a></li> <li><a href="feature-typography.html">Typography</a></li> <li><a href="feature-grid-system.html">Grid System</a></li> </ul> </li> </ul> </div> <div class="col-md-3"> <ul class="sub-menu"> <li> <span class="mega-menu-sub-title">Headers</span> <ul class="sub-menu"> <li><a href="index-header-2.html">Header 2</a></li> <li><a href="index-header-3.html">Header 3</a></li> <li><a href="index-header-4.html">Header 4</a></li> <li><a href="index-header-5.html">Header 5</a></li> <li><a href="index-header-6.html">Header 6</a></li> <li><a href="index-header-7.html">Header 7 (Below Slider)</a></li> <li><a href="index-header-8.html">Header 8 (Full Video)</a></li> <li><a href="index-header-9.html">Header 9 (Narrow)</a></li> <li><a href="index-header-10.html">Header 10 (Always Sticky)</a></li> <li><a href="index-header-11.html">Header 11 (Transparent)</a></li> <li><a href="index-header-12.html">Header 12 (Semi Transparent)</a></li> <li><a href="index-header-13.html">Header 13 (Semi Transparent - Light)</a></li> <li><a href="index-header-14.html">Header 14 (Full-Width)</a></li> </ul> </li> </ul> </div> <div class="col-md-3"> <ul class="sub-menu"> <li> <span class="mega-menu-sub-title">Header Account</span> <ul class="sub-menu"> <li><a href="index-header-signin.html">Header - Sign In / Sign Up</a></li> <li><a href="index-header-logged.html">Header - Logged</a></li> </ul> <span class="mega-menu-sub-title">Footers</span> <ul class="sub-menu"> <li><a href="index.html#footer">Footer 1</a></li> <li><a href="index-footer-2.html#footer">Footer 2</a></li> <li><a href="index-footer-3.html#footer">Footer 3</a></li> <li><a href="index-footer-4.html#footer">Footer 4</a></li> <li><a href="index-footer-5.html#footer">Footer 5 (Light)</a></li> <li><a href="index-footer-6.html#footer">Footer 6 (Light Narrow)</a></li> <li><a href="index-footer-7.html#footer">Footer 7 (Color)</a></li> </ul> </li> </ul> </div> <div class="col-md-3"> <ul class="sub-menu"> <li> <span class="mega-menu-sub-title">Admin Extension <em class="not-included">(Not Included)</em></span> <ul class="sub-menu"> <li><a href="feature-admin-forms-basic.html">Forms Basic</a></li> <li><a href="feature-admin-forms-advanced.html">Forms Advanced</a></li> <li><a href="feature-admin-forms-wizard.html">Forms Wizard</a></li> <li><a href="feature-admin-forms-code-editor.html">Code Editor</a></li> <li><a href="feature-admin-tables-advanced.html">Tables Advanced</a></li> <li><a href="feature-admin-tables-responsive.html">Tables Responsive</a></li> <li><a href="feature-admin-tables-editable.html">Tables Editable</a></li> <li><a href="feature-admin-tables-ajax.html">Tables Ajax</a></li> <li><a href="feature-admin-charts.html">Charts</a></li> </ul> </li> </ul> </div> </div> </div> </li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" href="#"> Portfolio <i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li><a href="portfolio-4-columns.html">4 Columns</a></li> <li><a href="portfolio-3-columns.html">3 Columns</a></li> <li><a href="portfolio-2-columns.html">2 Columns</a></li> <li><a href="portfolio-lightbox.html">Portfolio Lightbox</a></li> <li><a href="portfolio-timeline.html">Portfolio Timeline</a></li> <li><a href="portfolio-full-width.html">Portfolio Full Width</a></li> <li><a href="portfolio-single-project.html">Single Project</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" href="#"> Pages <i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li class="dropdown-submenu"> <a href="#">Shop</a> <ul class="dropdown-menu"> <li><a href="shop-full-width.html">Shop - Full Width</a></li> <li><a href="shop-sidebar.html">Shop - Sidebar</a></li> <li><a href="shop-product-full-width.html">Shop - Product Full Width</a></li> <li><a href="shop-product-sidebar.html">Shop - Product Sidebar</a></li> <li><a href="shop-cart.html">Shop - Cart</a></li> <li><a href="shop-login.html">Shop - Login</a></li> <li><a href="shop-checkout.html">Shop - Checkout</a></li> </ul> </li> <li class="dropdown-submenu"> <a href="#">Blog</a> <ul class="dropdown-menu"> <li><a href="blog-full-width.html">Blog Full Width</a></li> <li><a href="blog-large-image.html">Blog Large Image</a></li> <li><a href="blog-medium-image.html">Blog Medium Image</a></li> <li><a href="blog-timeline.html">Blog Timeline</a></li> <li><a href="blog-post.html">Single Post</a></li> </ul> </li> <li><a href="page-full-width.html">Full width</a></li> <li><a href="page-left-sidebar.html">Left sidebar</a></li> <li><a href="page-right-sidebar.html">Right sidebar</a></li> <li><a href="page-custom-header.html">Custom Header</a></li> <li><a href="page-404.html">404 Error</a></li> <li><a href="page-team.html">Team</a></li> <li><a href="page-services.html">Services</a></li> <li><a href="page-careers.html">Careers</a></li> <li><a href="page-faq.html">FAQ</a></li> <li><a href="page-login.html">Login / Register</a></li> <li><a href="sitemap.html">Sitemap</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" href="#"> Contact Us <i class="fa fa-angle-down"></i> </a> <ul class="dropdown-menu"> <li><a href="contact-us.html">Contact Us - Basic</a></li> <li><a href="contact-us-advanced.php">Contact Us - Advanced</a></li> </ul> </li> </ul> </nav> </div> </div> </header>CSS (css/custom.css)
#header .header-top { background-color: #0088cc; margin-top: -13px; } #header .header-top ul.nav-top li a:hover { background-color: #0099e6 !important; } #header .header-top ul.nav-top li a, #header .header-top ul.nav-top li span { color: #fff; } body.sticky-menu-active.always-sticky #header .social-icons { margin-top: 8px; }Let me know if you need further assistance.
Kind Regards, Jonas
Viewing 3 posts - 1 through 3 (of 3 total)
This topic is marked as "RESOLVED" and can not rceive new replies.
