Gourmand Template - Black Bar With Contact Info - How To Display - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Gourmand Template - Black Bar With Contact Info - How To Display

CR

candyce Rowlandson

Template 3 years ago

I am using the Gourmand template and i want to display the black bar at the top that contains the social media icons and contact info. I can see it there if i mess with some of the css that it's sitting underneath the white header. I would like to display it and also be sure it is sticky and clickable. I did try some css to get it to show but it was neither sticky nor clickable on the social icons (the logo seems to have been above it). I am not sure what needs to be changed as custom css so that i can have this feature in this template. Can you help please. I have SP Page Builder Pro.

0
5 Answers
Order by
Oldest Newest Votes
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #62685

Hi

Could you please give me your site URL and also screenshot? So that I can check?

-Regards.

0
CR
candyce Rowlandson
Accepted Answer
3 years ago #63019

i got it fixed:

#sp-header {
    background: #ffffff;
    margin-top: 40px; 
}

that did the trick. not sure why i didn't see it the other day.

0
CR
candyce Rowlandson
Accepted Answer
3 years ago #63022

i just realized the bar is not sticky and i can't seem to make it stick. i refer to the top black bar with the social icons and contact info.

https://mermaidgallery.ca

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #63091

Hi

Sorry for tobar there is no default feature like this, We have this sticky feature but it is only for header.You have to customize it yourself as we do not provide the customization support. You can also follow this link below:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header

-Regards.

0
CR
candyce Rowlandson
Accepted Answer
3 years ago #63155

For anyone else, i resolved it with the following:

#sp-header {
    background: #ffffff;
    margin-top: 37px;
}
#sp-top-bar {
    background: #333333;
    color: #aaaaaa;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

Hope that helps someone else!

0