Jump to content


Photo
- - - - -

Moving Navigation on top of background image in header area


  • Please log in to reply
6 replies to this topic

#1 margeaux7

margeaux7

    Super Member

  • Members

  • 118 posts
  • Framework Version:2.3
  • Country: Country Flag

Posted 21 April 2012 - 07:43 PM

I would like to create a header background image with the navigation sitting on top similar to

Please Login or Register to see this Hidden Content

When I have attempted this with both brandnav and regular branding and navigation set ups in the header section of the template area I can not figure out how to move the navigation on top of the image.

#2 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 21 April 2012 - 07:52 PM

@margeaux7: Can you please post a link to your site?

#3 margeaux7

margeaux7

    Super Member

  • Members

  • 118 posts
  • Framework Version:2.3
  • Country: Country Flag

Posted 21 April 2012 - 08:14 PM

I just started this but I wanted to know I could actually create what I envisioned.

Please Login or Register to see this Hidden Content



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 21 April 2012 - 10:18 PM

First, I'd suggest you get

Please Login or Register to see this Hidden Content

(Firebug for Firefox) an add-on that will give you the ability to test CSS live to see if it works. Second, I'd suggest using it on the site you want to emulate so you can see how it's done. Then, find the same type element (some changed from Platform Pro to PageLines Framework) and apply the changes. Third, I'd also suggest the Action Map plugin (via the Store) one of our Free plugins to help you see where things need to be applied. From there, it should simply be a matter of CSS which you can apply in the style.css found in PageLines-Customize plugin or in Custom Code.

#5 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 21 April 2012 - 10:35 PM

I agree with @rangelone. What you want is possible. But there is some work involved.

#6 margeaux7

margeaux7

    Super Member

  • Members

  • 118 posts
  • Framework Version:2.3
  • Country: Country Flag

Posted 21 April 2012 - 10:50 PM

I have tried and tried for the past 3 months to get the hang of firebug and also google chrome. I have failed.

#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 22 April 2012 - 03:13 PM

@margeaux7, when it comes to CSS and coding, I'm a total dunce. With Firebug, I was able to learn so much that I now help others with often complex solutions. On the right panel where the CSS is shown, you can edit CSS of various site elements. If it works on screen, just highlight the CSS you edited (the whole snippet) and right click (on a PC/Windows machine) and copy. Go to Dashboard > PageLines > Settings > Custom Code > CSS Rules and paste it at the end, then save. It's that simple. If you need help figuring out what CSS is, and how to use it, do what I do - cheat - go to

Please Login or Register to see this Hidden Content

and learn from the thousands of examples there. Also, I'd suggest reading that site to gain a great understanding of stylesheet elements. You can also engage one of our Pros at

Please Login or Register to see this Hidden Content