Cassiopeia drop down menu it is possible?

[sylwekb]

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]

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

[AMurray]

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.

[sylwekb]

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?

[AMurray]

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).

[Pavel-ww]

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]

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

[Pavel-ww]

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.

[Webdongle]

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?

[xplosion]

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.

[sylwekb]

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.

[Pavel-ww]

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

[Pavel-ww]

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.

[Webdongle]

If the Template was copied and you edited /templates/cassiopeia_copy/csstemplate.min.css then update would not overwrite, would not overwrite would it?

[Pavel-ww]

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

[Webdongle]

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.

[Pavel-ww]

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]

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,

[Pavel-ww]

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]

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.

[Pavel-ww]

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;
    }
}

[joomtheme]

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.

[Webdongle]

Will this get adopted into Joomla?

[joomtheme]

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]

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]

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

[joomtheme]

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

[Beata]

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