I have added a custom html module for the logo which has both a graphic logo and text logo underneath. Currently they both show at the top of the screen but when you scroll, the graphic disappears and just the text shows which is perfect.

Is there a way of hiding the text and only show the graphic when the page is full a desktop or when someone opens up the site on a mobile device - so that the logo is visible.

Putting the graphic on has also made the menu sit at the top of the page - but would be nice positioned in the middle vertically (or middle of the graphic used).

www.ecomad.com.au/mmp_upgrade/index.php

Hi

For the first question - have you tried using the responsive classes with the modules?

docs.joomlabamboo.com/zen-grid-framework-4/responsive/responsive-module-classes

If you wanted the logo above the menu in the middle you could change the logo position to full width in the template settings so both logo and menu are full width

Cheers
Paul

You would need css to align the image

but should work ok

Cheers

Thanks - with the logo and menu - just want the menu text to sit lower.

When you have just a Text logo, the Text logo and menu line up nicely. When I add the logo, the menu is pushed up to the top. And noticed on a smaller screen the Customer login sits right on top of the menu with no space between it like the template.

Have tried using the responsive classes - hidden-desktop which does remove the Text Logo but it removes it completely - when you scroll down the page, the sticky bar at the top with the menu doesn't show it. Will keep trying a work around.

Hi

The menu lines up with the top of the logo - it's not pushed up

You could add a margin to the menu to push it down

e.g. #menu ul.first-level {margin-top: 20px;}

With the responsive classes I'm not quite following

Do you have 2 modules both hiding and showing using the responsive classes?

Cheers

been playing around more with the logo graphic but can't work out how to make it work the way I need it to work.

Basically wanting the graphic logo to always appear but when you scroll the page and the sticky stays at the top, just to show the Text Logo (as it currently does).

How can I show just a graphic logo when someone first visits the site instead of both the graphic and the test.
Hopfully I am making sense.
www.ecomad.com.au/mmp_upgrade/index.php

See at top where there is graphic "Ecomad" logo and underneath is text saying "Ecomad".

I'm not sure I'm following - is this an option?

#logo h2 a {display: none;}
.fixed #navwrap #logo h2 a {display:block;}

Cheers
Paul

Thanks Paul

That seemed to work. Just one thing I noticed was on the fixed navwrap - the menu is pushed down. I think it might be something to do with display:block pushing the menu down.???

Try adding some styling support for the sticky specifically and targeting these styles

#menu ul.first-level > li {margin-top: 15px;}

#menu ul.first-level {margin-top: 20px;}


Cheers
Paul