Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1212992

    Hello,

    I’m currently working on a client site

    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;
    }
    
    #1213474

    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

    #1213496

    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

    #1213505

    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

    #1213753

    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

    #1214414

    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

    #1214902

    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

    #1215006

    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

    #1215355

    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

    #1215409
    #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;
    }
    #1215579

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

    Have a great weekend,

    Itai

    #1215764

    Hi Itai,

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

    Best regards,
    Rikard

    #1216307

    Guenni007: works like a charm! Thanks again.

    You can now close this thread.

    #1216391

    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

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

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