fbpx

Freedom Can't be Discounted, But Joomla Templates Can - 30% OFF. Coupon: 73RDINDEPENDENCEDAYGrab the Deal

Welcome, Guest
Username: Password: Remember me

Like Using JD Builder?

Submit feature requests on github and help improve JD builder.

Submit Now

TOPIC: Transparent Header and Image behind like jd chicago

Transparent Header and Image behind like jd chicago 4 weeks 2 days ago #16435

  • bragoaustfjord
  • bragoaustfjord's Avatar
  • Offline
  • Junior Member
  • Posts: 20
  • Thank you received: 1
  • Karma: 0
Hi Astroid dev.

Thanks for this awesome framework, I really love this. SO FAST :)

I have a question as I am not a coder nor designer, so please bear with me :)

I'm using Astroid Joomla template and Unite Slider from Unite CMS I would like to set my header menu as a transparent and get the slider image in full screen, just like the JD Chicago template. Could some on be so awesome and assist me on this.

This is my website. Vikings Tattoo
Beste regards

Bragi Austfjörð
Last Edit: 3 weeks 6 days ago by bragoaustfjord.
The topic has been locked.

Transparent Header and Image behind like jd chicago 4 weeks 2 days ago #16437

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 2739
  • Thank you received: 414
  • Karma: 85
Hello Bragi,

@chandan will reply to this since he is more proficient with CSS.

Thanks,
Chetan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The topic has been locked.

Transparent Header and Image behind like jd chicago 4 weeks 2 days ago #16469

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 2983
  • Thank you received: 471
  • Karma: 79
Hello,

Please follow the steps:

1. Add position-absolute w-100 on Hero section from the Layout Manager. Video:
2. Remove Header Background Color from the Colors tabs. Screenshot:

Thanks,
Chandan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
The topic has been locked.

Transparent Header and Image behind like jd chicago 4 weeks 2 days ago #16472

  • bragoaustfjord
  • bragoaustfjord's Avatar
  • Offline
  • Junior Member
  • Posts: 20
  • Thank you received: 1
  • Karma: 0
Thank you for this. It works 100% there's one last thing to do, there's a line under the header menu text, could you tell me how I can remove or make this also transparent :)

Awesome support

Beast Regards

Bragi Austfjörð
The topic has been locked.

Transparent Header and Image behind like jd chicago 4 weeks 2 days ago #16478

  • bragoaustfjord
  • bragoaustfjord's Avatar
  • Offline
  • Junior Member
  • Posts: 20
  • Thank you received: 1
  • Karma: 0
Fixed.

Thanks for the support.
Last Edit: 4 weeks 1 day ago by bragoaustfjord.
The topic has been locked.

Transparent Header and Image behind like jd chicago 4 weeks 1 day ago #16488

  • bragoaustfjord
  • bragoaustfjord's Avatar
  • Offline
  • Junior Member
  • Posts: 20
  • Thank you received: 1
  • Karma: 0
One problem. When I use this position-absolute w-100 on hero section the contact information at the top bar disappear and I get gap left side and the right side of the images on the front page.

Is there any way to prevent that.
Last Edit: 4 weeks 1 day ago by bragoaustfjord.
The topic has been locked.

Transparent Header and Image behind like jd chicago 4 weeks 1 day ago #16499

  • bragoaustfjord
  • bragoaustfjord's Avatar
  • Offline
  • Junior Member
  • Posts: 20
  • Thank you received: 1
  • Karma: 0
Found the problem. If I remove the footer the slider will not be 100% full screen on the left and right I see a gap. Any idea how I can have full screen slider with no side gaps.
And after I have used position-absolute w-100 on the hero section the Topbar Section is gone, I really would like to have Topbar Section.
Best Regards
Bragi
Last Edit: 4 weeks 1 day ago by bragoaustfjord.
The topic has been locked.

Transparent Header and Image behind like jd chicago 3 weeks 6 days ago #16529

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 2983
  • Thank you received: 471
  • Karma: 79
Add topbar class on Topbar Section from the Layout and remove background color.

Screenshot: www.screencast.com/t/UIjLy3Q8k1JI

Add the following code in custom.css file.

.topbar {
   z-index: 99;
}

Documentation: docs.joomdev.com/article/how-to-use-cust...ss-files-to-astroid/

Thanks,
Chandan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
The topic has been locked.

Transparent Header and Image behind like jd chicago 3 weeks 6 days ago #16534

  • bragoaustfjord
  • bragoaustfjord's Avatar
  • Offline
  • Junior Member
  • Posts: 20
  • Thank you received: 1
  • Karma: 0
Thank for the reply. But the solutions yo usugested dose not work.

What I did was add this "pt-2 fixed-top" to the Topbar Section and its working :)

Please close this topic
The topic has been locked.

Transparent Header and Image behind like jd chicago 3 weeks 6 days ago #16538

  • Lalit Kumar
  • Lalit Kumar's Avatar
  • Offline
  • Moderator
  • Posts: 431
  • Thank you received: 62
  • Karma: 14
Great! your query is now solved. Case closed then.

Thanks,
Lalit
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The topic has been locked.
Time to create page: 0.254 seconds

Happy Independence Day
Save Flat 30%


Celebrate Liberty with The Sizzling Summer Sale - Coupon: 73RDINDEPENDENCEDAY