Archived

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

  • 0

Customizing Menu And Header

Question

Posted · Report post

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

3 answers to this question

Posted · Report post

  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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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/

Share this post


Link to post
Share on other sites