Jump to content


Photo

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

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

Jack

    NaN

  • Moderators
  • PipPipPipPipPip
  • 3,096 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">
  <header></header>
  <nav></nav>
</div>
.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

TimW

    Dedicated Member

  • Members
  • PipPip
  • 224 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

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

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