Jump to content
cf666

Logo Cutout In Navbar/header?

Recommended Posts

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

 

post-43418-0-62538800-1354598176_thumb.j

Share this post


Link to post
Share on other sites
James B    436
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 :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
cf666    0
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!!!!

Share this post


Link to post
Share on other sites
Rob    547
Rob

Unfortunately, we can't write your code for you.  However, we can guide you to an excellent source: http://www.w3schools.com/css/

 

Essentially, the background image can be set within its proper element, then the logo, as a transparent backgrounded image can float over it.  Check http://www.epicurus.com

 

That's pretty much what I did.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
cf666    0
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...

;)

Share this post


Link to post
Share on other sites
Danny    1,327
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. - http://www.pagelines.com/pros/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
cf666    0
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...

??

Share this post


Link to post
Share on other sites
Rob    547
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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
cf666    0
cf666

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

Share this post


Link to post
Share on other sites
cf666    0
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.

post-43418-0-98017800-1358324477_thumb.j

Share this post


Link to post
Share on other sites
Danny    1,327
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. - http://www.pagelines.com/pros/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×