Protostar sandwich menu looks weird

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
martsund
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Thu Aug 05, 2021 8:18 am

Protostar sandwich menu looks weird

Post by martsund » Thu Aug 05, 2021 10:34 am

In small screen view the menu should collaps to a sandwich icon (the three lille lines) instead it show a rectangle with three small squares ... see the screenshot attached.

Can you help me to corret this issue

:) Martin sund
You do not have the required permissions to view the files attached to this post.

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 40287
Joined: Sat Apr 05, 2008 9:58 pm

Re: Protostar sandwich menu looks weird

Post by Webdongle » Thu Aug 05, 2021 12:56 pm

Have you made modifications to the Template's files?
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

martsund
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Thu Aug 05, 2021 8:18 am

Re: Protostar sandwich menu looks weird

Post by martsund » Thu Aug 05, 2021 6:02 pm

I have just centered the logo and the menu... But even if I set it back to align left, there are no different

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 40287
Joined: Sat Apr 05, 2008 9:58 pm

Re: Protostar sandwich menu looks weird

Post by Webdongle » Thu Aug 05, 2021 6:51 pm

Have you put the logo in the same Module position as the menu?
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

User avatar
AMurray
Joomla! Champion
Joomla! Champion
Posts: 7062
Joined: Sat Feb 13, 2010 7:35 am
Location: Australia

Re: Protostar sandwich menu looks weird

Post by AMurray » Thu Aug 05, 2021 9:14 pm

shouldn't menu go in "menu" position and logo in "logo" position? Protostar caters for both.
Regards - A Murray

martsund
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Thu Aug 05, 2021 8:18 am

Re: Protostar sandwich menu looks weird

Post by martsund » Thu Aug 05, 2021 9:26 pm

My Logo is set in the Protostart -> Advanced -> Logo
Menu is a menu module set to position 1 (Navitagtion)

I have just made a user.css file with: - for center of both menu and logo.

.navigation {
text-align: center;
}
.navigation .nav {
display: inline-block;
}

div.header a.brand {
float: none;
}

div.header a.brand img {
display: block;
margin: 0 auto;
}

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 40287
Joined: Sat Apr 05, 2008 9:58 pm

Re: Protostar sandwich menu looks weird

Post by Webdongle » Thu Aug 05, 2021 10:03 pm

That must be what is causing the problem
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

martsund
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Thu Aug 05, 2021 8:18 am

Re: Protostar sandwich menu looks weird

Post by martsund » Fri Aug 06, 2021 5:08 am

Nope I think you are wrong Webdongle, because I tried to uninstall protostar, downloaded joomla installation packed and copied the protostar folder over to my host. In the backend admin, I clicked on discover and installed protostar from scratch. I empty cache in joomla and in my browser. No css modification yet, tested and boom the sandwich menu still look the same. - no different.

martsund
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Thu Aug 05, 2021 8:18 am

Re: Protostar sandwich menu looks weird

Post by martsund » Sat Aug 07, 2021 10:41 am

oh it is the Calendar Planner that does it. I have set up a test site " https://earsound.dk/ " where I have installed just joomla from scratch and the Calendar Planner. No modification no nothing.
Try to see how the menu collaps wrong in Calendar Menu item. The menu is the native joomla menu and the template is set to Protostar.

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 386
Joined: Tue Jun 30, 2020 12:17 pm

Re: Protostar sandwich menu looks weird

Post by Pavel-ww » Sat Aug 07, 2021 11:25 am

martsund wrote:
Sat Aug 07, 2021 10:41 am
oh it is the Calendar Planner that does it. I have set up a test site " https://earsound.dk/ " where I have installed just joomla from scratch and the Calendar Planner. No modification no nothing.
Try to see how the menu collaps wrong in Calendar Menu item. The menu is the native joomla menu and the template is set to Protostar.
Hi. Calendar overrides Template classes [class^="icon-"], [class*=" icon-"].
To solve the problem, you need to configure it using CSS for the entire site using stronger selectors or "!important" to override the styles both of template and calendar.
For example:

Code: Select all

.btn.btn-navbar.collapsed {
	display: flex;
	flex-direction: column;
}
.navbar .btn-navbar .icon-bar {
	width: 18px !important;
	height: 2px !important;
	margin-bottom: 2px;
}

martsund
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Thu Aug 05, 2021 8:18 am

Re: Protostar sandwich menu looks weird

Post by martsund » Sat Aug 07, 2021 5:54 pm

Hi and thanks Pavel-vv

In the Protostar template I have a file called user.css
- that center my menu and do what your suggest...:

.navigation {
text-align: center;
}
.navigation .nav {
display: inline-block;
}

.btn.btn-navbar.collapsed {
display: flex;
flex-direction: column;
}
.navbar .btn-navbar .icon-bar {
width: 18px !important;
height: 2px !important;
margin-bottom: 2px;
}

Now I just need to put your code into the Component of JoomlaWhat Calendar Planner.... But can you advice me or guide me?

The result can be seen here:

https://earsound.dk/


:-) Martin

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 40287
Joined: Sat Apr 05, 2008 9:58 pm

Re: Protostar sandwich menu looks weird

Post by Webdongle » Sat Aug 07, 2021 6:14 pm

You could override the extension and edit its css so that the Class only applied to the div it is in. I am not sure of the syntax but there will be others that will know and hopefully post it.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 386
Joined: Tue Jun 30, 2020 12:17 pm

Re: Protostar sandwich menu looks weird

Post by Pavel-ww » Sun Aug 08, 2021 7:27 am

martsund wrote:
Sat Aug 07, 2021 5:54 pm
Now I just need to put your code into the Component of JoomlaWhat Calendar Planner.... But can you advice me or guide me?

The result can be seen here:

https://earsound.dk/
Hi Martin. I'm not sure that I understood you correctly. I do not see the code in your user.css file.

All you have to do is add the code in user.css.
You do not need to add anything to the Calendar Planner. This code is intended only for the menu button.

user.css designed to override the styles of all that is on your site, including third-party extensions styles. You can only use this file without thinking about how to add code to some other place.
1.jpg
2.jpg
Small refinement: the code should be without ".collapsed" class, this class affects the button when menu open.

Code: Select all

.btn.btn-navbar {
	display: flex;
	flex-direction: column;
}
.navbar .btn-navbar .icon-bar {
	width: 18px !important;
	height: 2px !important;
	margin-bottom: 2px;
}
You do not have the required permissions to view the files attached to this post.

martsund
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Thu Aug 05, 2021 8:18 am

Re: Protostar sandwich menu looks weird

Post by martsund » Sun Aug 08, 2021 9:05 am

Hi again Pavel-ww

I will just thank you so much for your kind help.

How ever your suggestion needs a tweek.... Please watch my screenshot video:

https://earsound.dk/css-menu.mp4 (I could not attache the video in this threat)


The behavior of the sandwich menu is not right... the video telles the story better that I can explain here...

Best regards

Martin

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 386
Joined: Tue Jun 30, 2020 12:17 pm

Re: Protostar sandwich menu looks weird

Post by Pavel-ww » Sun Aug 08, 2021 9:25 am

martsund wrote:
Sun Aug 08, 2021 9:05 am
The behavior of the sandwich menu is not right... the video telles the story better that I can explain here...
It is required to put the code into breakpoint max width 979px.
Change the code to the following.

Code: Select all

@media (max-width: 979px) {
    .btn.btn-navbar {
        display: flex;
        flex-direction: column;
    }
    .navbar .btn-navbar .icon-bar {
        width: 18px !important;
        height: 2px !important;
        margin-bottom: 2px;
    }
}
Tip: FileZilla + Notepad - very uncomfortable practice for editing code. Install VS Code and SFTP plugin (this is all free). Your workflow will look like this.
333.jpg
FileZilla makes sense to use only for file transfer. Personally, I use the Profiles component inside Joomla Admin for this.
You do not have the required permissions to view the files attached to this post.

martsund
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Thu Aug 05, 2021 8:18 am

Re: Protostar sandwich menu looks weird

Post by martsund » Sun Aug 08, 2021 2:24 pm

It seems like the developer has the very same issue on his website

https://demo.joomlathat.com/index.php/calendar-planner

User avatar
Pavel-ww
Joomla! Explorer
Joomla! Explorer
Posts: 386
Joined: Tue Jun 30, 2020 12:17 pm

Re: Protostar sandwich menu looks weird

Post by Pavel-ww » Sun Aug 08, 2021 2:28 pm

martsund wrote:
Sun Aug 08, 2021 2:24 pm
It seems like the developer has the very same issue on his website

https://demo.joomlathat.com/index.php/calendar-planner
There was no doubt about it. :)


Post Reply

Return to “Templates for Joomla! 3.x”