Logo in menu

Hi

I’ve added the logo as a menu item that comes into view when I scroll down on the page (after following these instructions: https://forum.tagdiv.com/topic/moveplace-logo-in-menu-when-scrolled-down-and-menu-fixed/).

1. However, the image doesn’t show in the menu when I zoom in until the category menu button changes from three lines to nine small squares (mobile view). I would like the image to follow in the menu bar when I scroll down on a mobile device, as well.

2. How do I make the menu-image center-aligned? I’ve tried to modify the ‘display: block;’ line in CSS, but with no luck.

Thanks,
Are

Hi

1.
– It looks like this on desktop: http://www.screencast.com/t/87nJU4mMgt
– When I zoom in (responsive mobile view), the logo disappears: http://www.screencast.com/t/JKWHWH03b
–> I would like the logo to show in mobile view as well.

2.
How do I center the logo in the menu? It currently looks like this: http://www.screencast.com/t/87nJU4mMgt

Thanks!

I am using logo in Logo section (http://www.screencast.com/t/jlBHzbkqRd),
but the whole point is to show the logo in the scroll-menu on desktop as well as on mobile.

I have followed your previously described steps to make the logo show in the menu when scrolling on desktop (see the screencasts in my original post). However, these steps have resulted in the logo to disappear from the scroll menu in mobile view.

2. Thanks for the CSS advice. I’ve tried it out, and it looks great (http://www.screencast.com/t/DeYJSyxDZpF)… until I zoom in. The logo jumps to the right (http://www.screencast.com/t/TUHQptYM).

I’ve used the following CSS:

 .menu-item-37076  {
    position: absolute;
    left: 260px;
    right: 260px;
}

How do I make it centered, no matter what?

1. Zooming in further (mobile view), the logo disappears: http://www.screencast.com/t/KSoryFQcTRIB

How do I make the logo show in the menu bar, both on desktop AND mobile?

Are

hi, what do you mean : you zoom it??
you need to use media queryes to do that.

also don’t use : left and right when you position: absolute;

use either left or right.

/* responsive monitor */
@media (min-width: 1200px) {
    .menu-item-37076  {position: absolute;left: 260px;}
}

/* responsive portrait tablet */
@media (min-width: 768px) and (max-width: 1018px) {
    .menu-item-37076  {position: absolute;left: XXXpx;}
}

/* responsive landscape tablet */
@media (min-width: 1019px) and (max-width: 1199px) {
    .menu-item-37076  {position: absolute;left: XXXpx;}
}

/* responsive phone */
@media (max-width: 767px) {
    .menu-item-37076  {position: absolute;left: XXXpx;}
}

replace the XXX with the size that you want

Thanks for you message.
Radu A.

• This reply was modified 12 years by Radu A.

Thanks for the CSS codes Radu.

The question still remains: How do I make the logo visible in the menu bar when scrolling, both on desktop AND mobile?

In your demo, the logo is visible in the menu when scrolling in responsive mode (mobile), but not when scrolling on desktop (see the images in this post: https://forum.tagdiv.com/topic/moveplace-logo-in-menu-when-scrolled-down-and-menu-fixed/)

I have followed Marius’ steps to make the logo visible as an image in the menu when scrolling on desktop. It works great (see http://www.screencast.com/t/DeYJSyxDZpF).

HOWEVER, this fix has made the logo in the menu disappear in responsive mode (see http://www.screencast.com/t/KSoryFQcTRIB)

Thanks for helping me out!

Are

Hi. It stopped working after I followed the steps to make the logo visible as an image in the menu when scrolling on desktop (as described by you here: https://forum.tagdiv.com/topic/moveplace-logo-in-menu-when-scrolled-down-and-menu-fixed/). The only difference is that I’m using the 3rd logo option, not the default option (as in the demo).

I’m developing the site locally, so I don’t have an URL for you.

hi,
please take a look at the example in pour demo, there is working.

Thanks for you message.
Radu A.

But your demo doesn’t support the logo in the menu on desktop (not mobile) when scrolling. That’s the whole point. How do I keep the setup you have in the demo, while also adding the logo in the menu when scrolling on desktop? Thanks for taking the time helping me out : ) Are

Radu and Marius: The logo shows in the menu when scrolling on mobile if I choose “Header Style 1” (as in your demo).

It doesn’t work if I choose “Header style 3”, which is the one I’m using. This must be a bug?

Ok. Please let me know when you have a fix!

Best,
Are

Just updated to 3.2. Did you fix this yet (doesn’t look like it…)?

Are

Ok. When’s the next update coming? It would be nice to get this issue out of the way…

THANKS!

One more thing:

As I mentioned in the start of this thread, I’ve added the logo as a menu item that comes into view when I scroll down on the page (after following these instructions: https://forum.tagdiv.com/topic/moveplace-logo-in-menu-when-scrolled-down-and-menu-fixed/).

The top of my site should look like this when I enter:

However, sometimes it shows the logo in the menu when loading:

The logo is only supposed to be visible when scrolling. You’ve given me this css to make that happen:

.menu-item-37076 {
display: none;
}

Thanks for the superb support!

Are

• This reply was modified 12 years by atflaten.

Yes, the site is developed locally…