Custom Header

[JiffiDesign]

Hi,

I wonder if you could help me to create a custom header which contains elements from some of the existing header options. Basically, what I would like in my custom header is:

Top ::: The top section from Header 4
Middle ::: A separate section for the client’s logo
Bottom ::: A modified version of the menu from Header 7, with only the left-aligned menu and without the min-height settings etc.

The website I’m working on is: Louise Ballantine Makeup Artist. This version of the site does NOT use the Porto template, but will give you an idea of the look I’m trying to achieve.

The Porto version of the site is here. As you can see, I’ve tried to force a full-width section above the menu, but the variety of margin and position settings for the menu are overriding what I’m trying to do.

Any help would be greatly appreciated. If I can understand how to customise the template to suit various layouts, I’ll pretty much use Porto for everything… I LOVE IT!

– Kevin

---

[Support]

This reply has been marked as private.

[korkealento]

Would it be possible to see the answer to this question?

Thanks

---

[Support]

Hello, OK, I removed some private information from the code, here’s the answer:

—————————————————————————————————————————————————

Hello, we usually don’t do any kind of customizations for the buyers needs, but in that special case, here’s a good way to start:

HTML

<header id="header" class="clean-top">
	<div class="header-top">
		<div class="container">
			<nav>
				<ul class="nav nav-pills nav-top">
					<li class="phone">
						<span><i class="fa fa-phone"></i>123 456 789</span>
					</li>
					<li class="email">
						<span><i class="fa fa-envelope"></i>[email protected]</span>
					</li>
				</ul>
			</nav>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<h1>Logo</h1>
				<h2>text</h2>
			</div>
			<div class="col-md-6">
				
			</div>
		</div>
	</div>
	<div class="container">
		<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>
						<a href="page.php">HOME</a>
					</li>
					<li>
						<a href="page.php">BIO</a>
					</li>
					<li class="dropdown">
						<a class="dropdown-toggle" href="#">
							Text
							<i class="fa fa-angle-down"></i>
						</a>
						<ul class="dropdown-menu">
							<li><a href="page.php">Page</a></li>
						</ul>
					</li>
					<li>
						<a href="page.php">GALLERY</a>
					</li>
					<li>
						<a href="page.php">VIDEOS</a>
					</li>
					<li>
						<a href="page.php">REVIEWS</a>
					</li>
					<li>
						<a href="page.php">RATES</a>
					</li>
					<li>
						<a href="page.php">CONTACT</a>
					</li>
				</ul>
			</nav>
		</div>
	</div>
</header>

CSS (css/custom.css)

#header.clean-top .header-top {
	background-color: #000;
	margin-bottom: 25px;
}

#header .header-top nav {
	background: transparent;
}

#header nav ul.nav-top li a,
#header nav ul.nav-top li span {
	color: #fff;
}

#header nav {
	float: none;
	width: 100%;
	background: #f4f4f4;
}

I think you can make a few more changes, but that’s the HTML/CSS you need to start the customizations.

Kind Regards,

Jonas

—————————————————————————————————————————————————

I hope it helps.

Jonas

---

[korkealento]

Thanks for sharing that – I appreciate it.

I have a design similar to the header in index-header-6.html

I would like the sticky menu to act as it does when I scroll.
However, I would also like to retain the search bar/social icons at the top along with the logo and menu bar when I scroll (at the moment the search bar line disappears).

How can I retain that line when I scroll?

Thanks again for the help

---

[manjy]

Hello,

I have a similar question…
Using the header in index-header-6.html template, I have removed the top bar with the contact information and the Search. However, when I scroll, the logo and the menu buttons are barely visible. How can I fix this?
I would also like the Search bar to be inline with the menu buttons.

---

[Support]

Hello,

1) @korkealento, here’s my suggestion:

(css/custom.css)

@media (max-width: 991px) {
	body.sticky-menu-active #header {
		top: 0;
	}

	body.sticky-menu-active #header.clean-top .header-top {
		position: relative;
		z-index: 1;
	}

	body.sticky-menu-active #header .social-icons {
		margin-top: 12px;
	}
}

2) @manjy, you can fix that by adding:
(css/custom.css)

body.sticky-menu-active #header {
	top: 0;
}

I hope it helps.

Kind Regards, Jonas

---

[JiffiDesign]

Thanks for your response. It certainly ‘looks’ more like the original, but the solution you have provided is incomplete. When the window size is reduced, the menu becomes collapsed, yet does not stick to the top of the screen. Instead, the section containing the logo text is at the top, but only the second line. Also, the height of the menu’s container changes when I scroll down.

Basically, all I’m after is a full-width, sticky menu which is not affected by or reliant on the height/content of any elements above it. The menu should appear at the top on smaller screens, but I have no requirement for the logo text to be visible as part of the sticky menu. If anything, I’d rather the nav pills and collapsed menu were combined on smaller screens, but there’s certainly no need for the client’s logo to be visible at all times.

So, to summarise… there are a few different things I would ‘like’, but all I ‘need’ at this moment is a sticky menu which is not affected in any way by the height or content of any elements above it (nav pills, logos, text, slider).

---

[Support]

Hello @JiffiDesign, so I think this topic may help you: http://www.okler.net/forums/topic/how-to-make-the-menu-always-sticky/ – * there are a few other adjustments that you may need to do.

Regards,

Jonas

---

[Author]

Posts