Jump to content

Archived

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

mike5

Full splash window

Recommended Posts

mike5

Hi Pagelines,

 

Im trying to have a full responsive background photo, with a masthead text and a transparant navigation bar. Like this website: www.wirelab.nl is this possible to create? If so how do I do that.

 

As Im only able to get a full width background image and the white text however my background doesn't stretch to the bodem of my browser window

 

So if anybody could please help me out I would be truly grateful

 

 

 

 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

It's certainly possible, but will require some custom CSS.

 

What I would do is add the Canvas section to your Header Template Area, upload your image that section and set the Scrolling effects and sizing option to Set Height of Window. Then add your Masthead section and configure it.

 

You will also want to add either the NavBar section or Navi Section to the Fixed Template Area and use custom CSS to make it transparent.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
mike5

Thank you so much.Do you perhaps have a link where I can find these custom CSS?

 

Again thanks for dealing with this matter

Share this post


Link to post
Share on other sites
Danny

There is no link for the custom CSS. The best method of adding custom CSS is to your use Google Chromes dev tools, inspect the elements and apply your custom CSS, if you like the output, then copy your changes to your custom CSS.

 

See our documentation for assistance - http://docs.pagelines.com/customize/overriding-default-css


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
mike5

Ok i have managed to get the background full windowed and responsive to the height. Now I only remain that the navbar is transparent and shows the background image of the canvas and I need an arrow on the bottem so it guides users down when they click on it (example www.wirelab.nl)

 

Any thoughts on how to do these things are much appreciated.

Share this post


Link to post
Share on other sites
GetMeWebDesign

That arrow is done with an anchor (http://forum.pagelines.com/topic/32905-anchor-links-from-one-page-to-another/?hl=anchor). Below you mast head add a text box and something like:

 

<a href="#anchorname">more info<br><i class="icon icon-caret-down"></i></a>

 

and add <a id="anchorname"></a> wherever you want the page to scroll to

 

trabsparent navi:

 

body .pl-fixed-top {
  background-color: transparent;
}

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
mike5

Again thank you. The anchor is working however the navigation bar wont become transparant with the css given.

Share this post


Link to post
Share on other sites
mike5

Ok the navigation is transparant when I scroll however it remains white at the top I would like the photo in the back to show in the fixed area, any ideas?

 

Thanks

Share this post


Link to post
Share on other sites
GetMeWebDesign

mike5 This works... it is the fixed top pusher which is at play...

 

#fixed-top, .fixed-top-pusher {
  height: 0px;
}

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Danny

As far as I can tell your navigation is transparent. However, your background is white, so its making it look a different color, you will probably want to make the fixed pusher class 0px.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
mike5

Awesome it works, but the problem no is that on mobile devices the complete navigation is gone?

 

Im truly appreciate the constant help from the community

Share this post


Link to post
Share on other sites
GetMeWebDesign

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
GetMeWebDesign

mike5 some code in paste bin

[ptiframe]84-5ighrp[/ptiframe]


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
mike5

Dear Getmewebdesign and Danny,

 

I want to thank you for your dedication in helping me with all my questions and troubles. I truly appreciate the fast responses and would like to let you guys know that everything is working out.

 

Again thank you.

Share this post


Link to post
Share on other sites
GetMeWebDesign

Excellent. Glad I could help... my bill is in the post LOL


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Danny

Excellent. Glad I could help... my bill is in the post LOL

 

hehe

 

mike5"] - No problem, although @[member="GetMeWebDesign did most of the work.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×