Jump to content


Photo
- - - - -

Logo Cutout In Navbar/header?


Best Answer Rob , 07 December 2012 - 12:43 AM

I pointed my site out because a transparent image placed over a background is exactly what you really need. If you look at Dashboard > PageLines > Site Options > Color Control, you'll see a background upload area where you may also position the background image.  This doesn't affect the branding.  So, if you want a 50px gap at the top between the top of your background and top of the site, you can use the settings controls to create that, effectively creating the effect you wish, where the branding logo sticks out, above the top edge of the background.

 

This doesn't appear to be a situation where CSS is needed at all.  Two options apply here.. the one I provided or a graphics solution.

Go to the full post


  • Please log in to reply
10 replies to this topic

#1 cf666

cf666

    Advanced Member

  • Members
  • 44 posts
  • LocationLos Angeles, CA
  • Country: Country Flag

Posted 04 December 2012 - 05:16 AM

Hi all,

Is it possible to have a shape (logo) float over the navbar/header as in comp attached?

If so, how??

Thanks in advance...

 

Attached Files



#2 James B

James B

    Advocate

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

Posted 04 December 2012 - 06:29 AM

Hi there,

 

Yes you could create that type of layout. You need to use some custom css though.

 

Create your logo in the shape you want with a transparent bg and save as a png. Then upload this to the site and use the brandnav section to align the nav and the logo as shown in your inspiration image.

 

Then use some css to bring up the page content so it sits nicely underneath the nav with the logo floating on top :-)



#3 cf666

cf666

    Advanced Member

  • Members
  • 44 posts
  • LocationLos Angeles, CA
  • Country: Country Flag

Posted 05 December 2012 - 02:35 AM

hey James,

 

thank you, I know that much. The issue is what CSS I need to write.

(FYI, the comp is my design, not "inspiration").

If you (or anyone!!) can help with this, I'm all ears, please!!!!



#4 Rob

Rob

    One Smart Egg

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

Posted 05 December 2012 - 03:01 AM

Unfortunately, we can't write your code for you.  However, we can guide you to an excellent source:

Please Login or Register to see this Hidden Content

 

Essentially, the background image can be set within its proper element, then the logo, as a transparent backgrounded image can float over it.  Check

Please Login or Register to see this Hidden Content

 

That's pretty much what I did.



#5 cf666

cf666

    Advanced Member

  • Members
  • 44 posts
  • LocationLos Angeles, CA
  • Country: Country Flag

Posted 05 December 2012 - 06:27 AM

Thanks, Rob, I appreciate that.

I'm not sure I know what you mean by "that's pretty much what I did" because I don't see that you have a shape that sticks out OUTSIDE of the header/nav area ONTO the main content area, only a transparent logo over a bg image in the header, which is easy enough to do and not what I'm asking.

Maybe you can give me some pointers with this specific issue:

The logo is part of the brandnav, which is in the header, and the photo is in the body/main content area (on other pages that same area where the photo is would be populated by text or other content). So, my question is how to make the brandnav or nav classic or whichever nav I need to use, have a cutout shape (given by a transparent png) that sticks out from the nav area OVER the main content area...

It seems to me this would be way more easily accomplished with straight CSS without having Pagelines in the middle, by just floating the logo. I just don't know how to deal with it within the Pagelines framework.

I hope you guys can throw me a bone here...

;)



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 13192 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 05 December 2012 - 08:02 AM

If I understand you correctly, what you'll need to do is create the image and save it as a .png with a transparent background. The you will need to use custom CSS, apply it to your navigation and then position both your navigation and main content area.

 

You may also need to use position CSS along with z-index.

 

All of this can be found in the link Rob provided above.

 

If you're not not sure how to do this customisation, then I recommend you contact one of our Pros. -

Please Login or Register to see this Hidden Content



#7 cf666

cf666

    Advanced Member

  • Members
  • 44 posts
  • LocationLos Angeles, CA
  • Country: Country Flag

Posted 07 December 2012 - 12:16 AM

Did something happen lately where you guys stopped providing the awesome support you had been providing all this time? That included helping people with their code as I remember clearly...

??



#8 Rob

Rob

    One Smart Egg

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

Posted 07 December 2012 - 12:43 AM   Best Answer

I pointed my site out because a transparent image placed over a background is exactly what you really need. If you look at Dashboard > PageLines > Site Options > Color Control, you'll see a background upload area where you may also position the background image.  This doesn't affect the branding.  So, if you want a 50px gap at the top between the top of your background and top of the site, you can use the settings controls to create that, effectively creating the effect you wish, where the branding logo sticks out, above the top edge of the background.

 

This doesn't appear to be a situation where CSS is needed at all.  Two options apply here.. the one I provided or a graphics solution.



#9 cf666

cf666

    Advanced Member

  • Members
  • 44 posts
  • LocationLos Angeles, CA
  • Country: Country Flag

Posted 13 December 2012 - 10:09 PM

ok, i'll try that, thank you, Rob!



#10 cf666

cf666

    Advanced Member

  • Members
  • 44 posts
  • LocationLos Angeles, CA
  • Country: Country Flag

Posted 16 January 2013 - 08:23 AM

ok, I'm still not finding the solution to this issue.

I positioned the branding logo and used the following to position where I want it vertically:

 

 

.mainlogo-link, .mainlogo-img {
max-width: 100%;
display: block;
margin-top: -55px !important;
 
although I can't seem to find the way to have it appear ON TOP, not UNDERNEATH (as in z-index) the fixed nav bar. As you can see, the fixed nav bar is obliterating the upper part of the logo.
The weirdest thing is when I resize the browser window to smaller (the breaking point at which the fixed nav bar becomes a menu that displays vertically... which by the way display differently in Chrome than in Firefox, see attached)... the logo displays ON TOP of the fixed nav bar!!! WTH???
 
Any help will be greatly appreciated... thanks.

Attached Files



#11 Danny

Danny

    Is Awesome!

  • Moderators
  • 13192 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 16 January 2013 - 09:36 AM

Hi,

 

What you're trying to do is not simple, is most likely not possible by using custom CSS only and may require a custom code to replace the standard PageLines Fixed Nav.

 

Regarding the issue with Firefox and Chrome looking differently, this is because they're are different browsers that use different browser processors, so you need to make your custom CSS, work for both browsers.

 

I recommend you contact one of our Pros for assistance with this. -

Please Login or Register to see this Hidden Content