Jump to content
irenefarrimond

Customizing Menu And Header

Recommended Posts

irenefarrimond    0
irenefarrimond

Hi there! 

 

I am very new to pagelines, and have a couple of questions that I'm struggling with. I think they will be relatively straight forward CSS lines, but, bear with me, I'm not a pro at CSS. 

 

How can you change the background of the nav bar to an image?

How can you move the nav bar up so it's touching the header?

How can you make the header take up the full width of the content area?

 

Any help is appreciated! 

 

Thanks so much,

 

Irene

Share this post


Link to post
Share on other sites
catrina    103
catrina

  1. How can you change the background of the nav bar to an image?

    You can use custom CSS: http://www.pagelines.com/wiki/Custom_CSS. To add background image, please use the background-image CSS property here: http://w3schools.com/css/css_background.asp

  2. How can you move the nav bar up so it's touching the header?

    Custom CSS should also be used (please see above). Use the margin-top CSS property and use a negative value: http://www.w3schools.com/cssref/pr_margin-top.asp

  3. How can you make the header take up the full width of the content area?

    Also use Custom CSS. Adjust with width property as needed: http://www.w3schools.com/cssref/pr_dim_width.asp


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
irenefarrimond    0
irenefarrimond

thank you so much for the quick response! 

 

Those helped quite a bit. 

 

I was able to move the nav bar as needed. However, I cannot figure out how to make rest on top of the header and have a transparent value. Can you suggest CSS commands or point me in the right direction?

 

Thanks!

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, to make the item rest on the top of the header you'll probably need to remove some of the padding/margins between the sections.

 

An example of padding being removed

 

{padding-bottom:0;}

 

An example of a margin being removed

 

{margin-top:0;}

You can find out more about color/transparencies here, with an example of the code and different browser specs

 

http://www.webdesignerdepot.com/2010/11/adding-transparencies-and-gradients-with-css/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×