[allcalParticipant]

Is there a way to make the header transparent and on top of a full screen image underneath? I am using the standard Integrity 1 theme to test (without the video above header like in demo). I am referring to a look similar to https://www.uber.com. The header is semitransparent and looks to sit on top on a fullscreen image.

[FriechModerator]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Cheers!

[allcalParticipant]

I would want to make that happen here: http://allcalmarketing.com/ArtHausmann/

I have the navbar transparency set to “on” and the background color white with some css to make the top bar smaller and red.

How would you get the image below in the content_band to show as one picture with the nav bar background being semi transparent like https://www.uber.com/.

[RupokMember]

Hi there,

Thanks for updating. I am sorry but I am still not sure what you are really trying to achieve. Would you please add some screenshot that which section you are referring and what you are trying to accomplish?

Meantime, you can set the background color like below to get semi-transparent background –

background: rgba(0, 0, 0, 0.2)

Thanks

[allcalParticipant]

I want to duplicate the way the header and navigation shows on https://www.uber.com/. Look at the website. It has a full screen background image/slider with a semitransparent header.

For example on http://allcalmarketing.com/ArtHausmann/, how do I take away the white background on the current header and view the court house image as full screen/the background of the header?

Image attached.

[JadeModerator]

Hi there,

You can add this under Custom > CSS in the Customizer.

.masthead.masthead-inline {
    position: absolute;
    width: 100%;
    background: transparent;
}

.x-navbar {
   background: rgba(0,0,0,0.2);
}

Hope this helps.

[allcalParticipant]

That solution worked, but then messed up the internal pages. The navigation on a mobile device is transparent also which won’t function well. Is there a way to make the header look like that just on the home page?

There is also a white border line on the top and bottom of the transparent nav, http://allcalmarketing.com/ArtHausmann/ . Can we remove those?

[Rue NelModerator]

Hello There,

Please remove the code we have given in our previous reply. You can use this code instead:

@media(min-width: 768px){
  .home .masthead.masthead-inline {
    position: absolute;
    width: 100%;
    background: transparent;
  }

  .home .x-navbar {
    background: rgba(0,0,0,0.2);
  }
}

This code will only work in your home page. Please let us know if this works out for you.

[allcalParticipant]

I have been looking at other designs and liked http://www.kyautoaccidentattorney.com. Is there a way to mimic that look. I tried the css above for the inline header layout and it did not work.
Is there css for the inline header layout that makes the header transparent, the nav bar a white background with a container (with vertical divider would be nice), and the internal pages have the same parallax background like the internal pages on the same example website: http://www.kyautoaccidentattorney.com/ky-accident-attorney-lawyer-practice-areas/ ?

How would you change the background of the breadcrumbs to a semi transparent color with a container?

[RupokMember]

Hey there,

Thanks for updating! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[allcalParticipant]

Understandable. I would probably like to use the original code you provided in that case:

.masthead.masthead-inline {
position: absolute;
width: 100%;
background: transparent;
}

.x-navbar {
background: rgba(0,0,0,0.2);
}

It looks correct on the home page (http://allcalmarketing.com/ArtHausmann/) because I manually put an image at the top for the semi transparent header to show.

How would I put that same image at the top of every page on the website to match the home page? You can see currently the internal pages have the page content moved under the semitransparent header.

[LelyModerator]

Hello There,

You may use the following CSS:

.site{
    background-image: url(http://allcalmarketing.com/ArtHausmann/wp-content/uploads/2015/09/bg1.jpg);
    background-color: transparent;
    background-repeat: no-repeat;
}
.home .site{
    background-image: none;
    background-color: initial;
    background-repeat: initial;
}

Hope this helps.

[allcalParticipant]

That worked great for the background image, but the content and sidebar are still under the navbar on the internal pages. How can we move it so the sidebar and content are always moved down?

http://allcalmarketing.com/ArtHausmann/about/ as a reference.

[FriechModerator]

Hi There,

For that second CSS rule to work on all pages. Please remove the .home on its selector.

e.g.

.site{
    background-image: none;
    background-color: initial;
    background-repeat: initial;
}

Hope it helps, Cheers!

[Author]

Posts