button
- This topic has 3 replies, 2 voices, and was last updated 5 years, 5 months ago by
. This post has been viewed 1156 times
-
Posts
-
Trying to add a button in header and upon scroll when entering the sticky header the button does not change size or move with nav menu. Even after using data-sticky-width or height https://prnt.sc/xsh6f1 this is how the button looks in the regular menu https://prnt.sc/xshacn how can I get the button to adjust in size and align properly with the existing menu when the menu changes height? I have tried several things and can’t get this to work I normally work on static headers. Thank you.
Current code for button: https://prnt.sc/xshjd5
Hello,
You should remove the button from inside
<ul>....</ul>. Also theheader-logoclass and sticky attributes were not create for us in this situation.Try adding the button side by side of
header-btn-collapse-nav. Example:... ...... .... </ul> </nav> </div> <!-- Add Button HTML here (without the header-logo div and sticky attributes) --> <button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main nav"> <i class="fas fa-bars"></i> </button> ... ..... ......If even so you have no success, please send all
<header>.....</header>HTML code you are trying. You can use a service like https://pastebin.com to create a link with your code and share with us.Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Rodrigo I actually tried this first and found that the element is being hidden in the header I believe or being pushed down. Could be an index issue. Here is the current header code. Cannot get the button to stay in line with our menu and the button sizing needs to remain the right size when going from the regular header to the sticky header. Thank you for your help.
<header id="header" class="header-transparent header-semi-transparent header-semi-transparent-dark header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}"> <div class="header-body border-top-0 bg-dark box-shadow-none"> <div class="header-container container"> <div class="header-row"> <div class="header-column"> <div class="header-row"> <div class="header-logo"> <a href="index.html"> <img alt="" width="200" height="88" data-sticky-width="120" data- sticky-height="45" src="img/logos/logo.png"> </a> </div> </div> </div> <div class="header-column justify-content-end"> <div class="header-row"> <div class="header-nav header-nav-links header-nav-dropdowns-dark header-nav-light-text order-2 order-lg-1"> <div class="header-nav-main header-nav-main-mobile-dark header-nav-main-square header-nav-main-font-md header-nav-main-dropdown-no-borders header-nav-main-effect-2 header-nav-main-sub-effect-1"> <nav class="collapse"> <ul class="nav nav-pills" id="mainNav"> <li class="dropdown"> <a class="dropdown-item dropdown-toggle" href="index.html"> Home </a> </li> <li class="dropdown"> <a class="dropdown-item dropdown-toggle" href="about.html"> About </a> </li> <li class="dropdown"> <a class="dropdown-item dropdown-toggle" href="services.html"> Services </a> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="process.html"> Our Process </a> </li> <li> <li class="dropdown"> <a class="dropdown-item dropdown-toggle" href="contact.html"> Contact </a> </li> </ul> </nav> </div> <button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main nav"> <i class="fas fa-bars"></i> </button> </div> </div> </div> </div> </div> </div> </header>
Hello,
Please try with the HTML below for the header:
<header id="header" class="header-transparent header-semi-transparent header-semi-transparent-dark header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}"> <div class="header-body border-top-0 bg-dark box-shadow-none"> <div class="header-container container"> <div class="header-row"> <div class="header-column"> <div class="header-row"> <div class="header-logo"> <a href="index.html"> <img alt="" width="200" height="88" data-sticky-width="120" data-sticky-height="45" src="img/logos/logo.png"> </a> </div> </div> </div> <div class="header-column justify-content-end"> <div class="header-row"> <div class="header-nav header-nav-links header-nav-dropdowns-dark header-nav-light-text order-2 order-lg-1"> <div class="header-nav-main header-nav-main-mobile-dark header-nav-main-square header-nav-main-font-md header-nav-main-dropdown-no-borders header-nav-main-effect-2 header-nav-main-sub-effect-1"> <nav class="collapse"> <ul class="nav nav-pills" id="mainNav"> <li class="dropdown"> <a class="dropdown-item dropdown-toggle" href="index.html"> Home </a> </li> <li class="dropdown"> <a class="dropdown-item dropdown-toggle" href="about.html"> About </a> </li> <li class="dropdown"> <a class="dropdown-item dropdown-toggle" href="services.html"> Services </a> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="process.html"> Our Process </a> </li> </ul> </li> <li class="dropdown"> <a class="dropdown-item dropdown-toggle" href="contact.html"> Contact </a> </li> </ul> </nav> </div> <!-- BUTTON --> <a href="#" class="btn btn-modern btn-rounded btn-secondary">Get a Quote</a> <button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main nav"> <i class="fas fa-bars"></i> </button> </div> </div> </div> </div> </div> </div> </header>Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
This topic is marked as "RESOLVED" and can not rceive new replies.