10 replies to this topic

[cf666]

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

•  HOME TEMPLATE.jpg   87.95K  45 downloads

[James B]

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 :-)

[cf666]

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!!!!

[Rob]

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.

[cf666]

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...

[Danny]

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

[cf666]

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...

??

[Rob]

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.

[cf666]

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

[cf666]

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

•  Screen_shot_2013-01-16_at_12.16.39_AM-20130116-001929.jpg   139.52K  18 downloads

[Danny]

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