Header

osbert

Hi, how do i keep the menu stuck at the top of the page when a user scrolls down the page?
How do i replace "Open Hours" on the "head-right" module to social media icons? I tried to use the social media icons on "topbar-right" module but it doesn't display properly.

Thank you

pavit

For the sticky menu take a look at THIS DISCUSSION

Regarding social module you can add a custom.html module with this html

<ul class="social-list">
  <li><a href="#" title="Facebook" class="facebook"><span class="fa fa-facebook" aria-hidden="true"></span><span class="element-invisible">empty</span></a></li>
  <li><a href="#" title="Twitter" class="twitter"><span class="fa fa-twitter" aria-hidden="true"></span><span class="element-invisible">empty</span></a></li>
  <li><a href="#" title="Instagram" class="instagram"><span class="fa fa-instagram" aria-hidden="true"></span><span class="element-invisible">empty</span></a></li>
  <li><a href="#" title="Google plus" class="google-plus"><span class="fa fa-google" aria-hidden="true"></span><span class="element-invisible">empty</span></a></li>
</ul>

Add to your custom.css file this code for social-list

.social-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.social-list li {
  display: inline-block;
}
.social-list li a {
  display: inline-block;
}
.social-list li .fa {
  background: #ffffff;
  border-radius: 10px;
  color: #98d14c;
  line-height: 24px;
  height: 24px;
  font-size: 13px;
  text-align: center;
  width: 24px;
}
.social-list.social-color li .fa {
  color: #ffffff;
}
.social-list.social-color li .fa.fa-facebook {
  background: #3b5999;
}
.social-list.social-color li .fa.fa-twitter {
  background: #55acee;
}
.social-list.social-color li .fa.fa-instagram {
  background: #e4405f;
}
.social-list.social-color li .fa.fa-google {
  background: #dd4b39;
}

Hope it helps

Regards

osbert

Hi,

The first one works fine. The other, no. Have a look at how it looks

pavit

osbert

Please share website super user account editing your first post , i will have a look at it

osbert

pavit Okay. I'll do but actually, what i want to achieve is to have the entire header not to move, not just the menu. Sorry i wasn't clear in my first post.

How do i share the credentials with you?

pavit

osbert How do i share the credentials with you?

Please take a look at this post

point-5

osbert

pavit admin:

Removed details by Mod

osbert

pavit Thank you so very much ! I'm grateful.

osbert

pavit Everything works just fine and i'm happy but i realized that the header jumps around a bit. Ideally, it should be fixed. Can anything be done about it?
Also when you view the website on a mobile device it should look like the first image i uploaded and not the second attachement.

pavit

osbert

I added code to your custom.css file and header.php in /tpls/blocks folder

.t3-header.affix {
position: fixed;
top: 0;
  left:0;
z-index: 999;
width: 100% !important;
background:#fff;
}

Also added social module at the open hours place in head-right position

Please check now

Regards

pavit

osbert Can anything be done about it?

Sorry but i do not get your point, it looks fine to me no jumps except the one that overrides body for the affix rule and it is normal.

Regards

pavit

Hi osbert

I added to custom.css

@media (max-width: 767px){
  .t3-mainnav.affix {
    top: 95px;
  
}
}

Check now

osbert

pavit Thank you very much ! Thank you