nav bar and background issues - Support | Kriesi.at

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
May 14, 2020 at 5:57 pm #1212992
Itai
Participant
Hello,

I’m currently working on a client site

Solid State of Mind

I’m having a issue with the transparent Navbar. I added some external CSS to make it adjust left, but in the top ‘transparent’ state, it bunches up on the logo.

The other issue is the CSS specified background image that won’t show?

See code form child CSS:
```
.main_menu {
    position: relative;
    left: 150px;
    text-transform: uppercase!important;
    }
    
#header .container{
        width: 100% !important;
        padding: 0 !important;
        margin: 20px !important;
    }
    
    
    body {
        font-size: 15px !important;
        line-height: 22px !important;
        font-weight: 400 !important;
        color: #fff !important;
        background: url(https://solidstateofmind.com/wp/wp-content/uploads/2020/05/Boardbkg.jpg)!important;
  background-repeat: no-repeat!important;
  background-attachment: fixed!important;
  background-position: right center!important;
}
```
May 15, 2020 at 11:15 pm #1213474

Itai
Participant

Ok I fixed the nav bar issues but I still can’t see my background image. Can somebody have a look please? I need to get this done before the weekend.

Thanks

May 16, 2020 at 5:19 am #1213496

Rikard
Keymaster

Hi,

Your background image CSS is applying to the body tag, but since you have content over the body tag then that will be placed over the body.

Best regards,
Rikard

May 16, 2020 at 5:40 am #1213505

Itai
Participant

Hi Rikard, thanks for the reply,

I’m not quite sure i understand completely but what do you suggest I do to resolve the issue and see the background image?

Cheers,

Itai

May 17, 2020 at 6:55 am #1213753

Rikard
Keymaster

Hi,

If you want to have a background image for the entire page or site, then you would have to make sure that the background of your header, footer, and main content all don’t have any backgrounds set to them. Looking at your site now, that doesn’t seem to be the case at all.

Best regards,
Rikard

May 19, 2020 at 8:07 pm #1214414

Itai
Participant

Hi Rikard,

-The header needs to have a black background on scroll. I don’t need the image to show there.(I don’t have a footer.)

-The rest of the body does need a color+image background however. I have put in a css color and image via fonctions.php and style.css and have removed all mentions of color or background in the enfold styling options.

I get a black background (I am trying to get #1b2426) and no image…

What am I missing?

Thanks,

Itai

May 21, 2020 at 7:07 am #1214902

Rikard
Keymaster

Hi,

Thanks for the update. If you only need the background image for the main content then you can set that under Enfold->General Styling.

Best regards,
Rikard

May 21, 2020 at 2:22 pm #1215006

Itai
Participant

Hi Rikard,

Yes, I know that, but that’s not what I need.
I need to set the background via CSS because the client has requested a changing background on load. Therefore it has to be generated by the functions and CSS. I’m not asking how to do that, I have the code. What I’m asking is why the background-image property won’t show up even after I’ve removed all the “backgrounds” like you asked.

Anyway, I would appreciate a solution for this as my query was started 7 days ago. I did entice the client to buy the theme because of the ‘great support’ ;-)

Cheers,

Itai

May 23, 2020 at 7:16 am #1215355
Rikard
Keymaster
Hi,

If you hide the main div then you will see that you background image is there:
```
#main {
    display: none;
}
```
You will have to navigate through the DOM tree to see where there are backgrounds added. We can’t really be responsible for customisations like these, but we will try to help out though.

Best regards,
Rikard
May 23, 2020 at 10:44 am #1215409
Guenni007
Participant
```
#main, .main_color, .html_stretched #wrap_all,
.avia-msie-8 .av_header_sticky_disabled#header {
  background-color: transparent !important;
}
```
but with background-attachment: fixed you will have some troubles on OS X Safari Systems.
see here: https://kriesi.at/support/topic/theme-is-shaking-a-lot-in-safari/

The trick will be to have a pseudo before container with same background-image and to set the whole pseudo container to position : fixed then.

Look to the differece on a safari browser on scrolling fast with or without that:
```
#top {
  clip-path: inset(0 0 0 0);
  background-size: 0 !important;
}

#top:before {
  background-image: inherit !important;
  background-repeat: no-repeat;
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: right center;
  will-change: transform;
}

#main, .main_color, .html_stretched #wrap_all,
.avia-msie-8 .av_header_sticky_disabled#header {
  background-color: transparent !important;
}

.main_color {
    z-index: 5 !important;
    position: relative;
}
```
May 23, 2020 at 8:43 pm #1215579

Itai
Participant

Thanks so much Guenni007!!!
I will check it out on Monday.

Have a great weekend,

Itai

May 24, 2020 at 2:24 pm #1215764

Rikard
Keymaster

Hi Itai,

Thanks for the update, please let us know if you should need any further help on the topic.

Best regards,
Rikard

May 25, 2020 at 10:38 pm #1216307

Itai
Participant

Guenni007: works like a charm! Thanks again.

You can now close this thread.

May 26, 2020 at 6:37 am #1216391

Rikard
Keymaster

Hi,

Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘nav bar and background issues’ is closed to new replies.