menu problems

Sparkling
1

this is a question arising from the (resolved) issue in this thread:
https://colorlibsupport.com/t/top-menu-links-not-clickable-in-mobile-view/#post-88326

I have now got Responsive Menu up and running and it’s working well, I think. However, there are two things I need your help with as they seem to be related to the template not the plug-in:

  1. The hamburger in phone view obscures a bit of the logo. In your original Sparkling template, the hamburger expanded the top of the header (?navbar? header? I’m not sure what it’s called, the top of the page) so as not to cover the logo. Is there something I can put into the CSS for Responsive menu or for Sparkling that will restore this capability?

  2. Is there a way to centre the menu in desktop view, rather than it aligning to the right? You gave an answer to this and other questions in another forum, but I cannot sort out which of the CSS applies to the alignment and which to the other things the guy wanted.

my site is at http://santamariahotel.org
(we’ve moved the site to its proper URL and it is using your Sparkling-child2 theme)

thanks in advance!

(apologies if this appears twice, I thought I’d posted it once but seem to have lost it)

2

OK, I have managed to get the menu items centred (though the language switcher is not included and is tacked onto the left-hand side) by using this:
.navbar-nav {
width: 100%;
text-align: center; }

I think I can live with this! But do you have a solution for the hamburger problem?

And even more urgent, can you help me with the breakpoint problem in the thread here:
https://colorlibsupport.com/t/breakpoint-problems/

Thank you for a brilliant theme - only a couple more tweaks to go!

Site is here:
http://santamariahotel.org/

3

Hi @elvira,

I hope you are well today and thank you for your question.

I think I can live with this! But do you have a solution for the hamburger problem?

Yes i have following custom CSS solution for it.

button#responsive-menu-button {
    right: 5px;
    top: 5px;
}
@media screen and (max-width: 767px){
div#logo {
    max-width: 92%;
}
}

Best Regards,
Movin

4

Thank you again! It still sits slightly over the right-hand edge of the logo, but that actually looks neat on a phone, so I’m OK with that.The original Sparkling hamburger sits in its own space above the logo, though - is there a way to reproduce that? It would be useful to know, if it’s not too awkward to find out.

all best wishes

5

It is displaying fine for me as shown in the attached screenshot.

Please make sure you have used the shared CSS code correctly.

6

I deleted and repasted the code just to be sure, and I get the first screenshot if I close up the window on the desktop. If I disable Responsive menu, so that I am using whatever is in the native Sparkling template, I get the second screenshot. I was wondering if I could get the Responsive hamburger to sit in the space that the Sparkling hamburger sits in, on top of the logo.

But my other query, about the top menu links on a tablet, is much more important! I can live with this at the moment :slight_smile:

7

You can display the hamburger icon like that by using the below custom CSS code.

@media screen and (max-width: 767px){
div#logo {
    margin-top: 45px;
}
}
8

Thank you! I’ll try that (goes away and tries that). And it works!

And you know what, keeping it beside the logo as it did before is much, much neater (hangs head in shame). Thank you again - I’ll keep that bit of code handy, though, because I’m planning another website where it might look better like that,

all very best from London and Paraguay

9

You are most welcome here :slight_smile: