Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

New Lifestyle - logo covered by banner

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hi,

When using the New Lifestyle template the banner image slightly overlaps the logo. Do I need to have my logo a certain height? Or can I force the height in custom.css? It doesn't appear to happen all the time. I've seen it happen randomly in Firefox but always in Safari (I have attached an image of how this looks).

The site is www.ecochrome.com.au/J3/index.php. I'm happy to give you access to administrator if you need.

Thanks,

Liz
  • Liz Ruth's Avatar
  • Liz Ruth
  • 12 Month Developer
  • 50 posts
  • Karma: 0
The administrator has disabled public write access.
Hi Liz,

I'd look to edit the logo to the required size prior to adding it to the site

Some browsers will resize it for you but browsers like Firefox or IE won't

I'd view the site in those browsers to see how much you need to resize it

I'd estimate the height around 50px ish - the alternate option is to adjust the height of the menu

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Ok. I didn't want the logo resized, I want that top nav area to fit the height of my logo (100px) so I will need to change the menu height. I can set it via .navwrapper but then I can't have different logo sizes for different templates, i.e. front page template vs subpage template. Is there a better way I can do this?

Cheers,


Liz
  • Liz Ruth's Avatar
  • Liz Ruth
  • 12 Month Developer
  • 50 posts
  • Karma: 0
The administrator has disabled public write access.
Can you not assign different image files to different template styles?

Looks like you have fixed the first issue

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul,

I have assigned different image files to different template styles but there in lies the problem. If I set the navwrapper via custom.css then that height is applied to both template styles. Additionally, in some browsers the logo is still resized regardless of setting navwrapper. How can I stop this? What I want is a larger logo for the homepage and then a logo that fits the 50px height on the subpages.

The site where I am trying to achieve this is 68.168.211.147/~wealthvi/newlifestyle/

Thanks,

Liz
  • Liz Ruth's Avatar
  • Liz Ruth
  • 12 Month Developer
  • 50 posts
  • Karma: 0
The administrator has disabled public write access.
I think you would need to try using image with no image loaded and then use background images and target the css at the different views from the body class

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul,

Sorry for the delay in replying to this. It was on hold for a bit.

I still can't work out how to resolve this. I didn't fully understand your suggestion. It seems the overlapping occurs becasue of the inline styling of the sticknav height . Can I remove this somehow, so that the height is more dynamic? Or can I compromise and reset the stickynav height (via the template blocks) and not use different template views (this isn't really necessary at all for my purposes but having a larger logo is).

Thanks,

Liz
  • Liz Ruth's Avatar
  • Liz Ruth
  • 12 Month Developer
  • 50 posts
  • Karma: 0
The administrator has disabled public write access.
Is the amount of menu options firm? e.g. just the five items

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul & Liz,

I'm also having this trouble with the banner positioned image slider seeming to cover the logo and menu bar just slightly at the bottom.

I have Stickynav turned on and when the page is scrolled down enought to trigger the stickynav the logo and menu bar lower border reappear.

I turned off all logos, image or text, to see if that was pushing the bottom of the menuabar under the banner psoition but it still happens.

irwinclementstreeservice.com.au/staging/

I found that if I open the Chrome dev tools select the section#slideshowwrap.clearfix and then adjust the element.style {top: 90px;} to make it 91px the lower menubar border appears as the banner position is lowered just enough.

Problem is when I paste that into the custom.css file nothing happens! The element.style piece of css doesn't seem to come from any actual css file in Chrome dev tools.

I'm not a css guru, what am I missing?

Nat.
  • Nathaniel North's Avatar
  • Nathaniel North
  • 6 Month Developer
  • 10 posts
  • Karma: 0
The administrator has disabled public write access.
Hi Nat,

Did you have the logo sized in an editor so it fitted the space or was it being sized/not sized in the browser?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
I found the height of the menubar/logo area and then sized the logo image to fit that (61px from memory) but even when I turn off the logo image or logo text it still happens.

Nat.
  • Nathaniel North's Avatar
  • Nathaniel North
  • 6 Month Developer
  • 10 posts
  • Karma: 0
The administrator has disabled public write access.
Can you add the logo back?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Sure, check it now.

Nat.
  • Nathaniel North's Avatar
  • Nathaniel North
  • 6 Month Developer
  • 10 posts
  • Karma: 0
The administrator has disabled public write access.
What browser are you using?

This is Chrome resizing the logo for you

tree-site.jpg
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul,

Thanks for taking the time on this mate, I do appreciate it.

The issue I had was that the lower border in the menubar and logo area looked like it was overwritten by the banner position with the image slider.

I just checked in IE, Firefox and Chrome on the demo New Lifestyle site and it does the same on the front page, so I guess it's meant to be that way?

I led myself astray by checking the height of the navbar wrapper and not taking into account the image padding/margin attributes. I'll resize the logo image to fix this issue.

Nat.
  • Nathaniel North's Avatar
  • Nathaniel North
  • 6 Month Developer
  • 10 posts
  • Karma: 0
The administrator has disabled public write access.
ah right with you

Yes its supposed to be like that

Some browsers will resize content to fit e.g. like Chrome while others like Firefox or IE won't

Good luck with the site

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul,

I'm rehashing this forum post because I never actually resolved the issue I was having but it has reared it's head again.

So the main issue I'm having is that my clients want to show a bigger logo image than what is allowed for the New Lifestyle template. Is there a way I can increase the allowable size (currently around 50px height??) for the logo?

Thanks,


Liz
  • Liz Ruth's Avatar
  • Liz Ruth
  • 12 Month Developer
  • 50 posts
  • Karma: 0
The administrator has disabled public write access.
Hi Liz,

Is the link still correct for the site?

Do you have the new logo added now?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul,

The original link in this post is live now (www.echochrome.com.au) and the client was happy enough to go with the smaller sized logo (although they had requested it to be larger). But I want to use this template for another client but the only hitch is that the logo must be bigger. I've opted out of using this template a number of times due to this constraint but I really want to resolve it so I can use this template going forward. So it's a generic solution rather than a fix for a particular site. Is it possible?

Thanks,


Liz
  • Liz Ruth's Avatar
  • Liz Ruth
  • 12 Month Developer
  • 50 posts
  • Karma: 0
The administrator has disabled public write access.
Its certainly possible to do but would require a specific solution as it would depend on the imag height in question

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers