Problem displaying logo/menu on smartphone

leon55

Hello,

I administer 2 identical sites in different languages.
de.geschichte-chronologie.de
ru.geschichte-chronologie.de
Naturally, I make (I try to make) all the parameters the same.
Sites are displayed identically on desktop.
But on the smartphone, after updating Joomla and Purity 3 to the latest versions on the website ru.geschichte-chronologie.de, a problem arose - the top menu is not displayed.
This can be seen in the screenshots.

At the same time, the German logo is missing the lower part, so it is also depicted incorrectly. Although 3 menu lines are visible.

Most likely, this is the result of my mistake or oversight. Please forgive me, but I can’t find the reasons why the menu on the ru.geschichte-chronologie.de website not depicted.
I see that a height of the logo on websites is different, but I don’t understand why.

I hope you can help me. Furthermore, I will provide administrator access if necessary.

Sincerely,
Leon

Manit

Hi leon55

I checked and seems, the header is customized quite a lot.
On mobile, I see that, you are enabling both Off-canvas and dropdown menu. I think you should disable off-canvas menu in the Navigation setting.
For the Dropdown menu, it is working but there is some issue with the styling. You can fix it with CSS.
You can try this css rule:

div#maximenuck278 .maximenumobiletogglericonck {
background: transparent;
z-index: 9999;
}

Regards.

leon55

Manit Hi,
thank you very much for the quick response.

I tried your recommendations.

On both sites, Canvas is disabled (if I understand correctly).

I checked the Off-canvas Sidebar status for all 4 Layout options, although I don't understand if the Off-canvas can be assigned differently for different layouts. If possible, please explain this.

I still plan to test the CSS changes you suggested.

Sincerely
Leon

saguaros

Hi Leon,

This is correct place to setup the off-canvas, when you disable here, it will be disabled for all layouts.

I can see the dropdown navigation on mobile now so you can give it a try with above css suggestion and let us know if you need other help.

Regards

leon55

The problem with the top menu not being displayed was resolved using changes in ‎/templates/purity_iii/css/custom.css (purity_iii) on the ru website. Thank you very much. (Regarding this problem, it remains unclear to me why on the structurally identical site de, everything is fine without fixing custom.css).

Now, however, on the pages of both sites (except for the forum page) the bottom of the logo (which contains essential information) is not visible. But I know this problem. It is due to the fact that in Purity iii you can specify only one logo height, the same for all pages, but on the forum page the logo is narrower than on other pages, and the height is adjusted for it.

I would also like to point out a few more problems with displaying websites on a smartphone, one of which is significant (please tell me if a new topic needs to be opened for these issues). I note that on the desktop everything appears normally and there are no anomalies described below.

If you agree to help, to make it easier for you, I have created two test copies of my sites - r3 for the ru site and jo for the de site - and provide administrative access to them. You can do whatever you want there.

I am attaching 3 screenshots from two sites (ru and de), on which problem areas are marked.

On the screenshot of the start page of the German site de (= jo), the introductory text above the slideshow (implemented as a custom html module) is placed in the center, as it should.
On the screenshot of the start page of the site ru (= r3), the introductory text “extends” from both sides of the screen and the outer parts are lost.

On all pages, in the logo area on the right, there is a “ghost” menu - 3 blue stripes, which I circled with a red oval. This “menu” does not open, and I cannot check on my smartphone where it comes from (it does not exist on the desktop).
Finally, the third problem, which really interferes with the user’s work.

It is marked with a parabola on the forum screen. The search input line has moved to the left and the entered text is not visible.

I hope you will find time to answer my questions, at least the third one.

Thanks in advance

Leon

saguaros

Hi Leon,

1/ Kindly check the custom module in r3 site, you add additional classes: row row-feature-title which have its own style so it caused the issue, you should compare with jo site and update the same.

2/ That's default collapsed navigation of template, you can disable in the template settings.

3/ As I can see the width of this search field is forced to width of 600px so it looks like that. You can override with this custom.css:

@media (max-width: 480px){
#kunena.layout .input-group input {
    width: 60% !important;
}
}

leon55

Thank you so much for the great support.
All the above problems have been eliminated.
Sorry I didn't answer right away - I couldn't.

Based on the source of the problem you specified for point (3) (search field is forced to width of 600px), I found and eliminated this requirement. Everything work correctly even without the css code you suggested.
However, there was a small problem in this place with the desktop version of the site, but I will solve it with Kunena.

At the moment, I see only one problem with the site on a smartphone. It is shown in the following screenshots.

If you click on the menu icon (in the red circle), the menu items will be shown on the next screen (in the red rectangle). But these items are shifted to the left and the beginning of the lines are not visible.
Of course, this problem is not critical, and it must not be solved. But the view is untidy.

As before: jo=de, r3=ru.

Thank you again

saguaros

leon55 It's style issue of Kunena offcanvas menu. You can try this custom css code:

.knav-offcanvas.show .offcanvas-body {
    padding-left: 40px;
}

leon55

Thank you very much.

Everything worked out.