Hi,

On the small screens, the logo floats over the menu items, which interferes with the navigation. Is there a way to make it responsive or at least float with the rest of the modules to the right?


As you can see, the menu toggle sits on top of the logo. Whilst it does not look too great, at least is working.


Alternatively, I thought of using the .hidden-phone/.visible-phone module class to display e.g. a smaller logo published into the logo position (but it would still have to float away when the menu is shown) . However, I cannot see a logo module on the template or a functionality to create one. It is shown in your documents under "Modules and module positions used in the Nebula demo".

So basically there are two issues:
1. when the menu shows, the logo does not move to the right with the rest of the page.
2. In the template manager, I don't see a logo module which I could use to show different size of logos for the different screen sized, using .hidden or .visible module classes.

I look forward to suggestions.

Thank you,
Philipp

See: test.dalinyebo.com

Update: I reduced the logo. So that sorts out the "responsiveness". Not ideal (on the large screen), but it just works (I think).

The logo not floating away with the rest of the screen needs a solution.

Thank you,
Philipp

Can you confirm the browser and device you are using?

You could also try tweaking for the logo and menu being on top if required

@media (max-width: 400px) {
#navwrap button {right: pixal value here px; }

}

the template is currently right: 90px; at a highere breakpoint

Regards
Paul

Hi Paul,

Thank you. The screen-shots were form a galaxy phone's stock android browser. The logo does not tilt away, as it does on the larger nexus-7 screen.

NB: site now live at www.dalinyebo.com.

Thank you,
Philipp

Hi Phillip,

Can you confirm the px width of the screen

Thanks
Paul

Display specs are: 4.3 in (110 mm) with 480×800 pixels (218 ppi).

Hi Philip,

I cant see that on any of my devices but I can sort of see it in firefox at very low screen widths.

Can you try adding this to the custom.css file:

@media (max-width: 480px) {
#navwrap button {margin-top:-20px !important}
}

You may need to adjust that value depending on how that looks on the screen.

Thanks

Hi Anthony,
I give in on this one. Just cannot get the logo to move away from the off-canvas section on the phone. It works fine on the tablet.
Thank you for the assistance.
Regards,
Philipp

Thanks for the update Phillip

Cheers
Paul