[LumoDesignParticipant]

Hi,

Please have a look at my site.
http://46.32.240.33/lumodesign.com/

I’m trying to get the Top Bar and Nav bar semi transparent so you can see the video behind.

I’ve tried

.x-topbar{
opacity: 0.5; !important;
}

.x-navbar{
opacity: 0.5; !important;
}

Which seems to do something but the video is not behind it or its not really working.

Also another question is the sound on the video is not playing. It is the same video as the existing site here where the sound plays…

http://www.31thestore.com

Thanks for your time.

Ed

[JadeModerator]

Hi Ed,

Please update this code

.x-navbar {
    position: absolute;
    width: 100%;
    top: 0;
    background-color: rgba(0, 135, 18, 0.1);
    box-shadow: none;
    border-bottom: none;
}

to:

.x-navbar {
    position: absolute;
    width: 100%;
    top: 0;
    background-color: rgba(0, 135, 18, 0.5) !important;
    box-shadow: none;
    border-bottom: none;
}

[LumoDesignParticipant]

Hi,

Thanks for that. It does work, but I didn’t want to move the bars up to the top.

So they are showing as semi transparent at the bottom but the video is not underneath, it seems to but up to bars.

.x-navbar {
    position:initial;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5) !important;
    box-shadow: none;
    border-bottom: none;
}

.x-topbar {
    position:initial;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3); !important;
    box-shadow: none;
    border-bottom: none;
}

Is there a way of making the bars move up over the video as per the attached image?

Thanks for your help.

[LumoDesignParticipant]

Did you also have any ideas about the Sound not playing on the video?

[ChristopherModerator]

Hi there,

Background video doesn’t have sound by default. If you want to play the sound, please add video file as slider layer.

Hope it helps.

[LumoDesignParticipant]

But if you add the video as a layer on the slider it doesn’t go full screen like it is at the moment? Or am I doing something wrong?

Any comments on the semi transparent over video issue?

[RadModerator]

Hi there,

You can make the video full-screen even if it’s a layer. Edit your video layer and go to its setting and enable full-screen option.

A for transparency, please remove all that CSS, add this one instead.

  .masthead {
    position: relative;
    top:-116px;
height:0px;
  }
  .x-topbar {
  background-color: rgba(57, 52, 53, 0.8) !important;
  }
  .x-navbar {
  background-color: rgba(172, 161, 149, 0.8) !important;
  }

Cheers!

[LumoDesignParticipant]

Ah Great! Thanks that works.

The only problem now is that when you move down to Brands & Contact it doesn’t work in the design so well. As in the attached picture
the masthead is overlaying the brand logo images.

Is there a way to make the transparency stop when you move down like it works in this website?

http://respondcreative.com

Many thanks

Ed

[ChristopherModerator]

Hi there,

Thanks for writing in!

Upon checking your site, I wasn’t able to see the issue, please see :

Please Add this code too :

.x-navbar.x-navbar-fixed-top {
    background-color: #523838 !Important;
}

Hope it helps.

[LumoDesignParticipant]

Hi,

That worked great, but It threw up other design layout issues, so I’ve been moving a few things around and now I’m trying to keep the man Nav bar at the top with 0% transparency which then changes to no transparent when the page moves down. which is working as it is now.

But I’d like to move the Top bar as is to the very bottom of the screen and keep the way it all works the same.

I’ve tried using CSS to move the Bar down to the bottom using

Position: fixed;

but its all ranged to the left as in attached image 01 and then also after you’ve clicked one of the menu items to move the page down the top Nav bar changes to no transparency, but won’t change back to the transparency it had before. I’m guessing because of the code below, and the nav bar is always at the very top now

x-navbar.x-navbar-fixed-top {
    background-color: #aea497 !Important;
}

I hope that makes sense in what I’m trying to achieve.

Thanks

Ed

[Paul RModerator]

Hi Ed,

You can try this code instead.

.x-topbar {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Hope that helps.

[LumoDesignParticipant]

That worked on the top bar to get it at the bottom and all the way across, but it doesn’t work responsively. so on my phone the social icons move down below the address etc. but just off screen. As shown in the image attached. I’m also having the predicted problem with the Navbar not being transparent after the initial first clicks of the menu.

Plus there seems to be a weird dot in the middle of the screen on the mobile screen?

Sorry for all the questions, I am picking up CSS but I’m very new at it.

Many Thanks

Ed

[ChristopherModerator]

Hi there,

Please update this code :

.x-topbar {
    background-color: rgba(174, 164, 154, 0.5) !important;
    position: fixed;
    bottom: 0px;
    height: 0px;
    width: 100%;
}

To :

.x-topbar {
    background-color: rgba(174, 164, 154, 0.5) !important;
    position: fixed;
    bottom: 0px;
    width: 100%;
}

Find this code :

.x-navbar.x-navbar-fixed-top {
    background-color: #aea497 !Important;
}

And update it to :

@media (min-width:979px){
.x-navbar.x-navbar-fixed-top {
    background-color: #aea497 !Important;
}
}

In regards with gray dot, as I’m not able to see this on my end, please clear cache and check again.

Hope it helps.

[LumoDesignParticipant]

Hi,

Thats sorted the social icons situation and also made the bar load up as transparent on screens smaller than 979px

1. But the issue with the Navbar transparency is still a problem?

Please have a look at the image attached to view the issue.

I really need the nav bar at the top to be transparent at first load of the site, then when moving down to <BRANDS> or <CONTACT> the Navbar should be non transparent. But when you go back to <HOME> the Nav bar should be transparent again.

2. Also the great dot is still showing on my phone?

Thanks

Ed

[ChristopherModerator]

Hi there,

I can’t access your site any longer due to database connection error.
Please check.

Thanks.

[Author]

Posts