Cassiopeia drop down menu it is possible?

Everything to do with Joomla! 4.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
sylwekb
Joomla! Explorer
Joomla! Explorer
Posts: 322
Joined: Mon Mar 14, 2011 5:08 pm

Cassiopeia drop down menu it is possible?

Post by sylwekb » Tue Aug 24, 2021 10:29 am

In the template configuration, I can't see the possibility of adding a drop-down menu. Should I add any css classes? If so, what are they? Is there any additional external module for this?

My page
https://www.ogrodzeniabetonowewmalecha.pl

keesZ
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Sun Oct 30, 2016 9:52 pm

Re: Cassiopeia drop down menu it is possible?

Post by keesZ » Tue Aug 24, 2021 9:17 pm

Yes you can!
Create or modify a menu-module. Go to "Advanced" tab, make a selection in the "layout" field.
See example!
Good luck :)
Screenshot012.png
You do not have the required permissions to view the files attached to this post.

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

Re: Cassiopeia drop down menu it is possible?

Post by AMurray » Tue Aug 24, 2021 9:24 pm

How that can now be so obvious and yet missed apparently by many....

I was looking for the same thing, (out of curiosity) and spend an hour searching for an equivalent to the " nav-pills" method used for Protostar.
Regards - A Murray

sylwekb
Joomla! Explorer
Joomla! Explorer
Posts: 322
Joined: Mon Mar 14, 2011 5:08 pm

Re: Cassiopeia drop down menu it is possible?

Post by sylwekb » Wed Aug 25, 2021 7:20 am

Thank you very much! I've been looking for it for a long time and it's so obvious. Why is my menu under the logo? How do I make the logo and menu appear on the side as in the Cassiopeia template design?
You do not have the required permissions to view the files attached to this post.

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

Re: Cassiopeia drop down menu it is possible?

Post by AMurray » Wed Aug 25, 2021 9:40 am

sylwekb wrote:
Wed Aug 25, 2021 7:20 am
Thank you very much! I've been looking for it for a long time and it's so obvious. Why is my menu under the logo? How do I make the logo and menu appear on the side as in the Cassiopeia template design?
I suspect, too many menu items to fit the 'container' in order to have the menu side by side with the logo - is logo too big to accommodate both in one line?

One road of investigation, use the developer tools of your browser to inspect the code, and see what container is used for the image, and the menu, and in a user.css file, add your custom CSS to tweak their positions (e.g. margin, padding, etc).

(Just a couple of ideas, I can't guarantee either is the solution).
Regards - A Murray

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

Re: Cassiopeia drop down menu it is possible?

Post by Pavel-ww » Wed Aug 25, 2021 1:17 pm

sylwekb wrote:
Wed Aug 25, 2021 7:20 am
Why is my menu under the logo? How do I make the logo and menu appear on the side as in the Cassiopeia template design?
Hi. Try this code:

Code: Select all

.header {
	display: grid;
	grid-template-columns: minmax(0,1fr) repeat(4,minmax(0,19.875rem)) minmax(0,1fr);
	grid-gap: 0 1em;
	
}
.header .grid-child:first-child {
	grid-column: 2/3;
}
.header .container-nav {
	grid-column: 3/6;
}

sylwekb
Joomla! Explorer
Joomla! Explorer
Posts: 322
Joined: Mon Mar 14, 2011 5:08 pm

Re: Cassiopeia drop down menu it is possible?

Post by sylwekb » Wed Aug 25, 2021 1:49 pm

Does this code add to the template.css style sheet file? I added but it doesn't change anything.

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

Re: Cassiopeia drop down menu it is possible?

Post by Pavel-ww » Wed Aug 25, 2021 2:45 pm

sylwekb wrote:
Wed Aug 25, 2021 1:49 pm
Does this code add to the template.css style sheet file? I added but it doesn't change anything.
Create user.css file in cassiopeia/css/ folder and add there.

template.css does not work for the frontend as I can judge. Only template.min.css. But these files can never be edited.

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

Re: Cassiopeia drop down menu it is possible?

Post by Webdongle » Wed Aug 25, 2021 3:02 pm

Pavel-ww wrote:
Wed Aug 25, 2021 2:45 pm
sylwekb wrote:
Wed Aug 25, 2021 1:49 pm
Does this code add to the template.css style sheet file? I added but it doesn't change anything.
...
template.css does not work for the frontend as I can judge. Only template.min.css. But these files can never be edited.
Yes they can


You could try a 3rd party menu module?
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
xplosion
Joomla! Guru
Joomla! Guru
Posts: 704
Joined: Thu Aug 18, 2005 9:18 pm
Location: Rome
Contact:

Re: Cassiopeia drop down menu it is possible?

Post by xplosion » Wed Aug 25, 2021 3:04 pm

Pavel-ww wrote:
Wed Aug 25, 2021 1:17 pm
sylwekb wrote:
Wed Aug 25, 2021 7:20 am
Why is my menu under the logo? How do I make the logo and menu appear on the side as in the Cassiopeia template design?
Hi. Try this code:

Code: Select all

.header {
	display: grid;
	grid-template-columns: minmax(0,1fr) repeat(4,minmax(0,19.875rem)) minmax(0,1fr);
	grid-gap: 0 1em;
	
}
.header .grid-child:first-child {
	grid-column: 2/3;
}
.header .container-nav {
	grid-column: 3/6;
}
Interesting, looks fine but only on large screens. On tablets or small screens looks weird... the menu and hamburger is overlap the cassiopeia logo.
Anyway, need to improve this css for mobile.
www.tanase.it - Documentazione e Guide Gantry 5 in italiano, per creare Template Joomla! professionali!

sylwekb
Joomla! Explorer
Joomla! Explorer
Posts: 322
Joined: Mon Mar 14, 2011 5:08 pm

Re: Cassiopeia drop down menu it is possible?

Post by sylwekb » Wed Aug 25, 2021 5:19 pm

I improved a little on mobile, but it's not perfect. Drop-down menu extends over the border. I don't know how to fix it.

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

Re: Cassiopeia drop down menu it is possible?

Post by Pavel-ww » Wed Aug 25, 2021 6:22 pm

Of course. this needs to be changed for mobile. I'll take a look at it tomorrow

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

Re: Cassiopeia drop down menu it is possible?

Post by Pavel-ww » Thu Aug 26, 2021 7:23 am

sylwekb wrote:
Wed Aug 25, 2021 5:19 pm
I improved a little on mobile, but it's not perfect. Drop-down menu extends over the border. I don't know how to fix it.
Hi.
Why do you add code to template.min.css? All your changes will be lost after updating the Joomla or SCSS recompoint. Use the user.css file - it is specifically provided for this.

Why do you duplicate the code at the breackpoints?

Delete in template.min.css and transfer your code to user.css, then I look. So that I could see exactly your code.

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

Re: Cassiopeia drop down menu it is possible?

Post by Webdongle » Thu Aug 26, 2021 12:57 pm

If the Template was copied and you edited /templates/cassiopeia_copy/csstemplate.min.css then update would not overwrite, would not overwrite would 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! Guru
Joomla! Guru
Posts: 640
Joined: Tue Jun 30, 2020 12:17 pm

Re: Cassiopeia drop down menu it is possible?

Post by Pavel-ww » Thu Aug 26, 2021 1:38 pm

Webdongle wrote:
Thu Aug 26, 2021 12:57 pm
If the Template was copied and you edited /templates/cassiopeia_copy/csstemplate.min.css then update would not overwrite, would not overwrite would it?
Yes it is. But even if it is a copy of the template, for the development time it is worth using user.css for convenient debugging code. And this is especially important when you appeal for help.

After the end of the development, this code can be minimized and put in template.min.css

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

Re: Cassiopeia drop down menu it is possible?

Post by Webdongle » Thu Aug 26, 2021 6:35 pm

My point is not what is easiest, that was never in question. My point is that saying the files can't be edited was incorrect.
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! Guru
Joomla! Guru
Posts: 640
Joined: Tue Jun 30, 2020 12:17 pm

Re: Cassiopeia drop down menu it is possible?

Post by Pavel-ww » Fri Aug 27, 2021 9:21 am

Webdongle wrote:
Thu Aug 26, 2021 6:35 pm
My point is that saying the files can't be edited was incorrect.
Ok you're right. But I think it is not essential within this topic.

And besides, (for all templates where SCSS compilation is used) even if you use a copy of the template and change any template settings like colors and ect, this file can be recompiled, which will erase all changes.

Thus, not a bad tip "Do not edit core template files" refers to all users, except experienced who understand what they do.

I do not think that questions in this topic are asked by experienced users. An experienced user is able to solve it without questions on the forum

joomtheme
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Fri Sep 10, 2021 1:12 pm

Re: Cassiopeia drop down menu it is possible?

Post by joomtheme » Mon Nov 08, 2021 12:03 pm

xplosion wrote:
Wed Aug 25, 2021 3:04 pm
Pavel-ww wrote:
Wed Aug 25, 2021 1:17 pm
sylwekb wrote:
Wed Aug 25, 2021 7:20 am
Why is my menu under the logo? How do I make the logo and menu appear on the side as in the Cassiopeia template design?
Hi. Try this code:

Code: Select all

.header {
	display: grid;
	grid-template-columns: minmax(0,1fr) repeat(4,minmax(0,19.875rem)) minmax(0,1fr);
	grid-gap: 0 1em;
	
}
.header .grid-child:first-child {
	grid-column: 2/3;
}
.header .container-nav {
	grid-column: 3/6;
}
Interesting, looks fine but only on large screens. On tablets or small screens looks weird... the menu and hamburger is overlap the cassiopeia logo.
Anyway, need to improve this css for mobile.
Hi,

On mobile, the menu is intertwined with the logo. Is there a css edit for this?

Best Regards,

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

Re: Cassiopeia drop down menu it is possible?

Post by Pavel-ww » Mon Nov 08, 2021 12:36 pm

joomtheme wrote:
Mon Nov 08, 2021 12:03 pm
On mobile, the menu is intertwined with the logo. Is there a css edit for this?
Hi.

Of course it can be set for mobile. But I do not have a ready-made example at hand. Give a link to the site and describe how you want it for mobile.

joomtheme
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Fri Sep 10, 2021 1:12 pm

Re: Cassiopeia drop down menu it is possible?

Post by joomtheme » Thu Nov 11, 2021 9:35 am

Hi Pavel,

I'm sorry for the late reply. The code you provided worked. I edited it with some additional css. I hope you will like it.

CSS Code

Code: Select all

/* General
-------------------------------------------------------------- */

body {
  color: #5e709d;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Links */

a {
    color: #5e709d;
    outline: 0;
    text-decoration: none;
    transition: all ease 0.3s;
}

a:hover,
a:focus,
a:active {
    outline: 0;
    color: #26256c;
    text-decoration: none;
}

/* Typography
-------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #26256c;
    margin: 0 0 20px;
    font-weight: 700;
    text-rendering: optimizeLegibility;
}

h1 {
    font-size: 2.375em;
    line-height: 1.315;
    /* 38px */
}

h2 {
    font-size: 2.125em;
    line-height: 1.235;
    /* 34px */
}

h3 {
    font-size: 1.3em;
    line-height: 1.207;
    /* 30px */
}

h4 {
    font-size: 1.625em;
    line-height: 1.307;
    /* 26px */
}

h5 {
    font-size: 1.375em;
    line-height: 1.363;
    /* 22px */
}

h6 {
    font-size: 1.125em;
    line-height: 1.444;
    /* 18px */
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
}

/* Header
-------------------------------------------------------------- */

.header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(4, minmax(0, 19.875rem)) minmax(0, 1fr);
    grid-gap: 0 1em;
}

.header .grid-child:first-child {
    grid-column: 2/3;
}

.header .container-nav {
    grid-column: 3/6;
}

.container-header {
    background-color: #001b4c;
    background-image: none;
    box-shadow: 0 0px 10px rgb(0 0 0 / 7%);
}

/* Logo */

.container-header .navbar-brand img {
    width: 8rem;
    min-width: 8rem;
}

/* Search Button */

.container-search .btn {
    background-color: #34c759;
    border: 1px solid #34c759;
}

.container-search .btn:hover {
    background-color: #0053ad;
    border: 1px solid #0053ad;
}

/* Main Menu */

.container-header .metismenu > li.level-1 > ul {
    min-width: 15rem;
    border-radius: 2px;
    padding: 0.5em 1em;
}

.metismenu.mod-menu .mm-toggler:after {
    font-size: 10px;
    margin-top: 3px !important;
}

.navbar-toggler {
    font-size: 1rem;
    border-radius: 2px;
}

.navbar-toggler:focus {
    outline: 0 !important;
    box-shadow: none !important;
}

.metismenu.mod-menu .metismenu-item > a,
.metismenu.mod-menu .metismenu-item > button,
.metismenu.mod-menu .metismenu-item > span {
    outline: none !important;
}

@media (max-width: 767.98px) {
.container-header .navbar-toggler {
    margin-left: 50px;
    margin-top: 10px;
    }
.container-header .container-nav .container-search,
.container-header .container-nav nav {
    margin-top: 10px;
    display: block;
    }
}

/* Button */

.btn-primary {
    color: #fff;
    background-color: #0053ad;
    border-color: #0053ad;
    padding: 11px 43px;
}

.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary:hover {
    color: #fff;
    background-color: #34c759;
    border-color: #34c759;
}

.btn:focus,
.btn:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Blog */

.blog-featured img {
    width: 100%;
    border-radius: 5px;
}

h2.item-title {
    font-size: 24px;
}

dt.article-info-term {
    display: none;
}

.article-info dd {
    padding: 0;
    margin-right: 10px;
    display: inline-block;
}

Desktop and mobile view


https://imgur.com/DO3S4HV

https://imgur.com/w7oY75R



Thanks again for your help,

Best Regards.
Last edited by joomtheme on Thu Nov 11, 2021 10:23 am, edited 1 time in total.

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

Re: Cassiopeia drop down menu it is possible?

Post by Pavel-ww » Thu Nov 11, 2021 9:53 am

joomtheme wrote:
Thu Nov 11, 2021 9:35 am
I edited it with some additional css. I hope you will like it.
Hi. If it works for you, well, perfectly.

Tip: Place the code inside the same media query. There is no point in duplication. With a large amount it will cause confusion and deterioration in performance.
1.jpg

Code: Select all

@media (max-width: 767.98px) {
    .container-header .navbar-toggler {
        margin-left: 50px;
        margin-top: 10px;
    }
    .container-header .container-nav .container-search,
    .container-header .container-nav nav {
        margin-top: 10px;
        display: block;
    }
}
You do not have the required permissions to view the files attached to this post.

joomtheme
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Fri Sep 10, 2021 1:12 pm

Re: Cassiopeia drop down menu it is possible?

Post by joomtheme » Thu Nov 11, 2021 10:16 am

Pavel-ww wrote:
Thu Nov 11, 2021 9:53 am
joomtheme wrote:
Thu Nov 11, 2021 9:35 am
I edited it with some additional css. I hope you will like it.
Hi. If it works for you, well, perfectly.

Tip: Place the code inside the same media query. There is no point in duplication. With a large amount it will cause confusion and deterioration in performance.
1.jpg

Code: Select all

@media (max-width: 767.98px) {
    .container-header .navbar-toggler {
        margin-left: 50px;
        margin-top: 10px;
    }
    .container-header .container-nav .container-search,
    .container-header .container-nav nav {
        margin-top: 10px;
        display: block;
    }
}
Yes, you're right, I wonder why I did such a thing :) Thanks again for the support. I can't fix the css file.

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

Re: Cassiopeia drop down menu it is possible?

Post by Webdongle » Thu Nov 11, 2021 11:02 am

Will this get adopted into Joomla?
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".

joomtheme
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Fri Sep 10, 2021 1:12 pm

Re: Cassiopeia drop down menu it is possible?

Post by joomtheme » Thu Nov 11, 2021 1:12 pm

Webdongle wrote:
Thu Nov 11, 2021 11:02 am
Will this get adopted into Joomla?
Hi,

Use user.css file creation. You won't have any problems with the update.

I don't think it will be accepted. But I agree with you. Features would be nice to have.

Regards,

joomtheme
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Fri Sep 10, 2021 1:12 pm

Re: Cassiopeia drop down menu it is possible?

Post by joomtheme » Thu Nov 11, 2021 4:46 pm

Top logo and text field of Joomla offline mode login module is having problem. In this Please add the following additional code.

Code: Select all

.offline-card .header {
    display: block;
}

joomtheme
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Fri Sep 10, 2021 1:12 pm

Re: Cassiopeia drop down menu it is possible?

Post by joomtheme » Fri Nov 12, 2021 11:05 am

Features can be added to the template. It looks very confusing and we are compelled to turn to other templates.

joomtheme
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Fri Sep 10, 2021 1:12 pm

Re: Cassiopeia drop down menu it is possible?

Post by joomtheme » Mon Nov 15, 2021 2:00 pm

Hi,

New latest edit. Added background to mobile menu.

You can use and improve it. ;)

Mobile view: https://imgur.com/a/SHBDJtF

Desktop view: https://imgur.com/opffuJ2

user.css
/* Header
-------------------------------------------------------------- */

.header {
display: grid;
grid-template-columns: minmax(0, 1fr) repeat(4, minmax(0, 20rem)) minmax(0, 1fr);
}

.header .grid-child:first-child {
grid-column: 2/3;
}

.header .container-nav {
grid-column: 4/6;
padding-bottom: 0;
}

.container-header nav {
margin-top: 0;
}

.container-header {
background-color: #001b4c;
background-image: none;
box-shadow: 0 0px 10px rgb(0 0 0 / 7%);
}

/* Logo */

.container-header .navbar-brand img {
width: 5em;
min-width: 5em;
}

/* Menu + Mobile
-------------------------------------------------------------- */
.container-header .metismenu>li.level-1>ul {
min-width: 13rem;
padding: 10px;
border-radius: 5px;
/* Submenu */
}
.metismenu.mod-menu .mm-collapse>li.parent>ul {
border-radius: 5px;
/* Submenu > Submenu background */
}

.metismenu.mod-menu .mm-toggler:after {
margin: 0 0 0 0.3em;
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-left: 0.3em solid transparent;
/* Menu Arrow icon size*/
}

.navbar-toggler:focus {
box-shadow: none;
/* Mobil menu */
}

/* Menu Position Button Module */

#mod-custom110 .btn {
margin-top: 0.5em;
padding: 11px 43px;
}

@media (max-width: 767.98px) {
.container-header .container-nav .container-search,
.container-header .container-nav nav {
margin-top: 1em;
position: absolute;
left: 150px;
}

ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list {
background-color: #0000ff;
border-radius: 5px;
/* Mobil menu dropdown */
}

#mod-custom110 .btn {
margin-top: 0.5em;
left: 88px;
position: absolute;
/* Menu position button */
}

.container-header .navbar-brand img {
width: 4em;
min-width: 4em;
/* Header logo mobil size */
}

.container-header .metismenu > li.level-1 > ul {
border-radius: 5px;
border-left: 3px solid #ffc107;
/* Mobil menu > submenu */
}
}
Also, Pavel, thank you again.

Best Regards

User avatar
Beata
Joomla! Ace
Joomla! Ace
Posts: 1171
Joined: Fri Mar 02, 2007 2:06 pm
Location: Lithuania

Re: Cassiopeia drop down menu it is possible?

Post by Beata » Thu Jan 27, 2022 8:38 am

keesZ wrote:
Tue Aug 24, 2021 9:17 pm
Yes you can!
Create or modify a menu-module. Go to "Advanced" tab, make a selection in the "layout" field.
See example!
Good luck :) Screenshot012.png
No field for it
You do not have the required permissions to view the files attached to this post.


Post Reply

Return to “Templates for Joomla! 4.x”