Jump to content

Archived

This topic is now archived and is closed to further replies.

jagipson

Transparent Fixed Section

Recommended Posts

jagipson

I am trying to make a header like the following site: http://www.nd.edu/

They have their logo with a blue and yellow bar. Above the blue bar its actually transparent. You can see the image underneath of the building. How can I accomplish this with the Fixed section on DMS? I just started the build here:  http://recruiterwebsitedesign.com/polymer/

When I scroll down the bar in transparent but the top is white which looks like its the site wrap background. How can accomplish this?

 

Thanks

Share this post


Link to post
Share on other sites
jagipson

@danny 

I already had this part. It is transparent when you scroll down when your on the top of the site it has a white bar. I would want a picture like the science one that is currently on the site.  I have tried move the picture up but its still not working correctly. 

In a nutshell this is half right. But when your on the top I don't want a white bar i want it transparent.

 

Thanks

Share this post


Link to post
Share on other sites
Aires

Just because you made the menu transparent does not mean you removed the space that it occupies so with that said you will need to move the section below it up under it with css tied to a media querie for mobile responsiveness

Sent from my iPhone using Tapatalk

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Aires

You can also target the fixed top pusher Sent from my iPhone using Tapatalk


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
jagipson

When I move the slider up under the fixed menu then I loose the FIT TO WINDOW. Theres a bunch of white space under the slider this way. What do you mean target the fixed top pusher? @Aires @Danny

Share this post


Link to post
Share on other sites
Aires

If that's the issue then adjusting the fixed top pusher won't help either. Have you tried adding max-height: 100vh; to the section class. Google vh css. Not at my desk to help more than that. Sent from my iPhone using Tapatalk


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
jagipson

Yeah I tried this. It doesn't push the slider down anymore.  @Aires

Share this post


Link to post
Share on other sites
Danny

Unfortunately, to do this would require extensive code. As the navigation/layout you're trying to recreate would require lots of changes to the CSS using position absolute and fixed. Then you would need to use multiple media queries to make the layout/navigation play nice on mobile devices.

If you're still having issues, I recommend you contact our helpdesk who can provide you with contact information to developers/agencies who will be able to create this layout for you.

hello at pagelines dot com


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • jagipson
      By jagipson+
      I am using your fixed section for my site in development. http://recruiterseo.com/builder2/ I wanted to do a Transparent Fixed section I did end up figure out the code with was this:
       
        body .pl-fixed-top {     background-color: transparent !important;     box-shadow: none !important; }     The canvas underneath is a Set to full Height. Which its working just fine.   What my problem is Now i have this section above thats built in to the fixed section called .fixed-top-pusher that has a height  of 45px. Which pushes the site down 45px. If you set the height to 0px then your have 45px of white space at the bottom.  Then the picture doesn't display full screen.   I want a transparency fixed section on top. So, it will have a menu on top which is the fixed area and underneath that will be the full screen and width image.   
       
       
    • kwp4petar
      By kwp4petar
      Hi, i'm trying to get the hover background to be completely transparent.  The closest i've gotten so far is using a 75% opacity grey box I made in photoshop and set that as a background-image:
       
      .jgHover figure {
        background-image: url("...");
      }
       
      but that only changed one of the hover 'tiles', and even then the transparency revealed a blue (and now grey) box behind it.  
       
      My goal here is to have a 100% transparent box with a 2px white outline and the header showing, and that's it.  Then it behaves like normal with showing the content.
       
      Another question I have is: How do I know what a good image size is to use for this section?

      On your site you have a beautiful 3x3 layout of your staff with no spacing in between what so ever, each having a unique animation. How was that accomplished? Was special padding customizations used?
       
      Also, when I played with the animations on first installing the section, I noticed that the image gets a grey 'overcast'(?) over it.  Here's an image below using the Niall animation on the far left, while the other two remain as Charlie:
       

      (side question: what is the default size image being used here?)
    • mikeeg8
      By mikeeg8+
      Hi Guys,
       
      Is there a way of having a full width Media box, that sits within a Canvas Area please?
       
      Please take a look at this link:
       
      http://www.atlantic-digital.co.uk/tugo/our-brands/
       
      What I'd like to do - is have a full width image to sit on top of a canvas area that has a background image - so in this case, I'd like a pizza to sit on top of a stainless steel effect background (please see screen shot).
       
      Can this be done please, and if so how would I do this?
       
      Thank you.
    • DeGroeneBron
      By DeGroeneBron
      Hi,
       
      I have to say I love DMS and switched now to DMS2. Now the transition didn't go completely smooth, but I'm almost there.
       
      The menu in the fixed section isn't styled (like it was in DMS1). First i saw only the mobile menu (three strips), but now it doesn't look good as well.
       
      This is my site: degroenebron.nl.
       
      Please, can you explain to me how I can style the menu?
       
      Grtz,
       
      Jordi
    • tstirler
      By tstirler
      Hey, I'm having a strange issue on my site. The text does not show up on the front page.
      If you look at:
      http://www.anotherkindofmonster.com (in chrome at least) the text isn't visible.
      If you click a link and then return to the front page, then it is visible again.
       
      I'm struggling with finding the solution for this, and couldn't find a solution by searching either.
       
      Do you need me to enable debug for this?
       
      Thanks in advance.
      Torbjørn / Another Kind of Monster
×