Jump to content


Photo
- - - - -

Customizing Menu And Header


  • Please log in to reply
3 replies to this topic

#1 irenefarrimond

irenefarrimond

    Member

  • Members

  • 14 posts
  • Country: Country Flag

Posted 03 December 2012 - 04:31 PM

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



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 03 December 2012 - 06:04 PM

  1. How can you change the background of the nav bar to an image?
    You can use custom CSS:

    Please Login or Register to see this Hidden Content

    To add background image, please use the background-image CSS property here:

    Please Login or Register to see this Hidden Content

  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:

    Please Login or Register to see this Hidden Content

  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:

    Please Login or Register to see this Hidden Content



#3 irenefarrimond

irenefarrimond

    Member

  • Members

  • 14 posts
  • Country: Country Flag

Posted 03 December 2012 - 07:55 PM

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!



#4 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 03 December 2012 - 11:31 PM

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

 

Please Login or Register to see this Hidden Content

 

An example of a margin being removed

 

Please Login or Register to see this Hidden Content

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

 

Please Login or Register to see this Hidden Content