Jump to content


Can you help me to make the Top Bar fixed?

top bar nav bar fixed

  • Please log in to reply
4 replies to this topic

#1 mandibul_vox


    Forum Newcomer

  • Members
  • Pip
  • 4 posts

Posted 10 July 2017 - 11:10 PM

Hello guys,


I'm working on a new project - redesigning the website Eva Cleaners.

The problem I faced now is the top bar ( the top menu bar with pages navigation). I want to make it fixed so when someone visit a page from the site and scrolls down, the top bar to be visible in all cases. What is the best way to do it? I tried few suggestions on some forums but nothing works.


Forgot to mention that the site is built on custom php platform ( not wordpress).

#2 Jack



  • Moderators
  • PipPipPipPipPip
  • 3,218 posts
  • Gender:Male
  • Location:Jersey Channel Islands
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 10 July 2017 - 11:35 PM

This should work. Wrap your header and navigation element in a full width container.
<div class="fixed">
.fixed {
  width: 100%;
  position: fixed;
  top: 0;
Offset the element directly below by the height of the header and nav combined.
#mid_arrows {
  margin-top: 163px;
I would probably have your main content in a container too, rather than having to offset individual elements.

#3 TimW


    Advanced Member

  • Members
  • PipPipPip
  • 285 posts
  • Gender:Male
  • Location:West Country
  • Experience:Intermediate
  • Area of Expertise:Nothing

Posted 11 July 2017 - 09:14 AM

known as the 'sticky header' if you want to google. Sometimes you have a 'sticky footer' too so that the page footer isn't always visible but never rises up off the bottom of the page/window.

#4 mandibul_vox


    Forum Newcomer

  • Members
  • Pip
  • 4 posts

Posted 11 July 2017 - 10:46 PM

Thanks for your suggestion Jack, I will try to apply this and will post the results here.

#5 selenahale123


    Forum Newcomer

  • Members
  • Pip
  • 1 posts

Posted 17 July 2017 - 01:47 PM

Try Googling "Sticky Header". there you will find what you want.

Also tagged with one or more of these keywords: top bar, nav bar, fixed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users