Transparent header with background image

HTML & CSS
1
  1. How it is possible to make header transparent so slider would be visible behind menu. However I would like header background to be visible on scroll with background-color: #ffffff
  2. How it possible to send logo to the all left and menu to all right like in example behind the link provided below. Now it is somehow boxed?

Here is my website:
** Link removed by Admin **

Here is how I would like my header with menu to be:
http://demo.joomshaper.com/2018/opus/

I have tried:

#sp-header {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 99;
  background-color: transparent;
  padding: 40px 0;
  transition: 0.3s;
}
1 Like
2

I have removed your link until you can confirm that it is safe to visit. My anti virus is blocking the link as dangerous.

malware
malware1120×834 145 KB

3

I can confirm it is 100% safe. I have just uploaded fresh Joomla website in there. Maybe your antivirus does not like .tech websites?
P.S. My antivirus does not give any warnings.

Try http://ultest.ml/

4

That one seems ok :slight_smile:

At the moment your slider sits below the header so even if the header was transparent it would still appear white because there is nothing under it to see.

You have a couple of options that I can see. You could make the header position:fixed by default and then the slider would automatically rise up to the top of the viewport. You could then set the headers white background to transparent so that you can see it.

e.g.

#sp-header{
    background:rgba(255,255,255,0.6);
    position:fixed;
    left:0;
    top:0;
    transition:background 0.5s ease;
}
#sp-header.header-sticky{
    background:#fff;
}

If you wanted it fully transparent then change the 0.6 in the rgba value to zero instead.

The problem with this approach is that if the slider isn’t present on all pages then you may obscure content on those pages. You would need to pad the top of those pages without a slider using 140px padding-top to protect the content from sliding under the menu.

Another approach would be just to drag the slider upwards with a negative margin so that it sits under the menu.

e.g.

#sp-header{
    background:rgba(255,255,255,0.6);
    transition:background 0.5s ease;
}
#sp-header.header-sticky{
    background:#fff;
}

#sp-slider{
    margin-top:-140px;
}

The problem with this approach is that 140px is a ‘magic number’ that matches the height of your header and if header height changes or header text wrapped , or a user zoomed text then that height would not work. However, nothing drastic would happen as its only a slider and would just be a little misplaced in those scenarios.

If you want it full viewport width then you need to use container fluid inside the header and not container.

e.g.

<header id="sp-header" class="">
   <div class="container-fluid"> 
      <div class="container-inner">
          <div class="row" style="position: relative;">
1 Like
5

Thank you very much for your help. I have made an updates according to your suggestions but there are some problems with header. Can you please advice what is possibly wrong?

6

You seems to have removed the original rules for the fixed header? It is no longer fixed positioned?

You also added !important to the rules which you should not do because that makes it almost impossible to control. At your level you should never use !important. Only once you have a good understanding of CSS can you use !important. In most sites you will never use it and is a sign of a badly coded site.

Remove the important rules and revert the code to this.

#sp-header{
    background:rgba(255,255,255,0.6);
    transition:background 1.5s ease;
}
#sp-header.header-sticky{
    background:#fff;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:999;
}
#sp-slider{
    margin-top:-50px;
}

Note the rules need to be in that order and as you don’t understand the cascade properly yet you should probably place them at the end of the last css file you are calling.

If you do that correctly the page will look like this when you have scrolled:

helix
helix1517×843 223 KB

(I’m offline now but back tomorrow)

1 Like
7

Thanks for great tips! I am just starting. Ok, now I know that I should get rid of using !important. Now everything works except that logo is not visible on the right and also there is no background behind menu although it is set as I understand, why is so?
Here it set to be white and transparent but there is no background visible:

#sp-header{
    background:rgba(255,255,255,0.6);
    transition:background 1.5s ease;
}

It is behind slider?

8

Yes, I think so.

You could try to apply a higher stacking to it:

#sp-header {
    background: rgba(255,255,255,.6);
    transition: background 1.5s ease;
    z-index: 999;
    position: relative;
}

Another option could be to lower the slider level:

#sp-module-content > div{
    position: relative;
    z-index: -1; /* add */
    width: 100%;
    height: auto;
    margin-top: 0px;
    margin-bottom: 0px;
}
2 Likes
9

Yes its behind the slider. You need a stacking context (which was in place before) and you need to add position:relative and z-index to the initial state of the header.

#sp-header{
    background:rgba(255,255,255,0.6);
    transition:background 1.5s ease;
    position:relative;
   z-index:99;
}
#sp-header.header-sticky{
    background:#fff;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:999;
}
#sp-slider{
    margin-top:-50px;
}

The problem is that you are placing styles out of order in your css files. I have attached an image with the web inspector open (right side of image) and you can see that there is rule for the #sp-header in default.css which is over-riding anything in template css. (the rules nearer the top are the ones being applied assuming they aren’t crossed out in the web inspector.)

I suggest you just paste the code I gave you at the end of the default.css file and it will work as my screenshot where I have injected code into the live layout at the end of the css, You can see the code I added on the left side of the screen and this is live CSS editor plugin for chrome which is how I test live to make sure code I offer will work if placed correctly:)

helix2
helix21920×455 172 KB

2 Likes
10

Great! Thank you very much! Now I must say I have learned quite a lot in just one thread! I think I understand now how it works :slight_smile:

2 Likes
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.