1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Sticky header in WordPress

garyld1962 pro asked 5 years ago

I beat my head on this all weekend! Any help would be appreciated I have created a codepen for my WordPress header in my custom theme (it uses mdb pro). https://codepen.io/garyld1962/pen/JJVVxm/ I need the div with the logo AND menu to be sticky. 1) I can't find an example for this. 2) I can't seem to position the WP menu under the div (with my logo and address) properly. I used the provided WordPress MenuWalker code example to generate the
    Ideally, I would like the logo and address to be larger and then shrink by some percentage

Edyta Dabrowska free answered 5 years ago

Hello, Maybe try putting both divs inside the navbar like this: 
<nav class="navbar navbar-toggleable-md navbar-dark fixed-top">
    	
	    <div class="">
	    	<div class="row">
		    	<div id="fixed-top-header" class="navbar-header black col-12">
				    <div class="row justify-content-center">
					      <div class="column-md-4">
					        <img class="aligncenter size-medium wp-image-2746" src="http://activlifeprod.staging.wpengine.com/wp-content/uploads/2017/06/ALH-logo-resized-300x50.png" alt="Active Life Hearing" width="300" height="50" />
					      </div>
					      <div class="column-md-8 ml-4">
					        <div class="row">
					          <div class="col-md-12">
					            <span class="fa fa-phone"> </span><a href="tel:5615551212"><span class="al_phone ">(561) 555-1212</span></a> &nbsp;
					            <span class="al_address ">399 NW 2nd Ave. #214, Boca Raton FL 33432</span> </div>
					        </div>
					        <div class="row">
					          <div class="col-md-12">
					            <span class="fa fa-phone"> </span><a href="tel:9545551212"><span class="al_phone ">(954) 555-1212</span></a> &nbsp;
					            <span class="al_address ">2855 N University Dr. #300, Coral Springs FL 33076</span> </div>
					        </div>
					      </div>
					</div>
				 </div>   
			</div>
			<div class="row">
		        <div class="collapse navbar-collapse col-12" id="navbarNav1">
		            <ul id="menu-main-menu" class="navbar-nav mr-auto">
			            <li id="menu-item-2295" class="nav-item dropdown btn-group menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2295">
			            	<a class="nav-link dropdown-toggle" aria-labelledby="dropdownMenu1">Hearing Aids options</a>
			              	<div class="dropdown-menu dropdown depth_0">
			              		<a href="https://activlifeprod.staging.wpengine.com/hearing-aids/" 
			                		id="menu-item-2293" class="dropdown-item menu-item-type-post_type menu-item-object-page menu-item-2293">Hearing Aids</a>
			                	<a href="https://activlifeprod.staging.wpengine.com/hearing-aids/oticon-hearing-aids/" 
			                		id="menu-item-2293" class="dropdown-item menu-item-type-post_type menu-item-object-page menu-item-2293">Oticon</a>
			                	<a href="https://activlifeprod.staging.wpengine.com/hearing-aids/widex-hearing-aids/" 
			                		id="menu-item-2294" class="dropdown-item menu-item-type-post_type menu-item-object-page menu-item-2294">Widex</a>
			              	</div>
			            </li>
			            <li id="menu-item-1844" class="nav-item menu-item-type-post_type menu-item-object-page menu-item-1844"><a href="https://activlifeprod.staging.wpengine.com/hearing-loss/" class="nav-link">Hearing Loss</a></li>
			        </ul>
		            <ul class="navbar-nav ml-auto nav-flex-icons">
		                <li class="nav-item">
		                    <a class="nav-link"><i class="fa fa-facebook pink-text"></i></a>
		                </li>
		                <li class="nav-item">
		                    <a class="nav-link"><i class="fa fa-twitter pink-text"></i></a>
		                </li>
		                <li class="nav-item">
		                    <a class="nav-link"><i class="fa fa-instagram pink-text"></i></a>
		                </li>
		            </ul>
		        </div>
		    </div>    
	    </div>
	</nav>
Let me know what do you think.

garyld1962 pro answered 5 years ago

my Header is two div's stacked on top of each other the top has my logo etc, the bottom the Word Press Menu.

garyld1962 pro answered 5 years ago

Ok, that makes the header with the div with the logo sticky, but I need the logo div and nav bar to be as one. I have tried putting that div in the "header" tag but cannot get it to work. G

Edyta Dabrowska free answered 5 years ago

Hello, If you add navbar classes to the menu div <div id="fixed-top-header" class="navbar fixed-top container-fluid black"> it would be sticky. And how do you want the navbar to behave? Do you want it to be sticky with the menu div? Or to be stuck on top of the page? Regards,
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
garyld1962
Pro User 25Support score
2Questions 3Answers 0Snippets