Defining drop-down menu style in CSS for a Joomla template

laukejas5 · Post by **laukejas5** » Fri Aug 09, 2019 1:23 pm

Hi,

I am trying to build a custom template from scratch for my Joomla 3.9 website. I am new to web design. I have been following several tutorials on how to set up menu style via CSS, but I cannot seem to find information on how to define the drop-down menu style. The menu items are defined in Joomla configuration, and the menu should be injected into the right place.

relevant lines from index.php:

Code: Select all

<body> 
 <div class="nav">
    <nav>
        <jdoc:include type="modules" name="navigation" style="none"/>
    </nav>
 </div>
</body>

And from template.css:

Code: Select all

.nav {
  background-color:#FFA500;
  position: sticky;
  top: 0;
}


ul.nav { //this element needs centering
  margin:auto;
  width:80%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #FFA500;
}

ul.nav li {
  float:left;
  display:block;;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-right: 3px solid #bbb;
}

ul.nav li:last-child {
  border-right: none;
}


ul.nav li a{
  color: white;
  font-size: 20px
}

ul.nav li:hover {
  background-color: #e09100;
}

This code works fine for displaying the menu the way I want (except for not centering it in the screen, but that's not relevant) for simple menu items. However, if I add sub-menu items in Joomla Menu configuration, it gets all messed up. I want these sub-menus to be displayed in a drop-down fashion when the user hovers over the parent item with the mouse, but instead, right now these sub-menus are displayed below the parent item statically. Obviously, that's because I haven't written the code for that part yet. Problem is, I do not know how to define the style for these sub-menu items, because they are not defined in the CSS, but instead, provided by Joomla. I cannot find any relevant documentation that would tell me the keywords to hook up to these items. Can someone tell me how to turn these sub-menu items into a nice drop-down menu when the user hovers the mouse over the parent menu item?

laukejas5 · Post by **laukejas5** » Sat Aug 10, 2019 8:26 pm

Hi again. I figured part of this out. Turns out, the drop-down menu I needed to access is referred to as nav-child. Now I can style these sub-menus. Problem is, I cannot style second level drop down menu independently, because it has the same class, nav-child. I cannot even make it hidden, and visible only when the user hovers the mouse over the parent item in the drop-down menu. Here is my CSS now:

Code: Select all

.nav {
  height:51.2px;
  background-color:#FFA500;
  position: sticky;
  top: 0;
}

ul.nav { //this element needs centering
  margin:0;
  width:80%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #FFA500;
}

ul.nav li {
  float:left;
  display:block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-right: 3px solid #bbb;
}

ul.nav li:hover {
  background-color: #e09100;
}

ul.nav li:last-child, ul.nav-child li {
  border-right: none;
}

ul.nav li a, ul.nav-child { 
  font-size: 20px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.nav-child {
  display: none;
  position: absolute;
  background-color:#FFA500;
  padding: 0px 0px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
  
ul.nav-child li a{
  padding: 0px 0px;
}

ul.nav-child li {
  float:none;
}

ul.nav-child-child {
  display: none;
}

ul.nav-child a:hover {
  background-color: #e09100;
}

ul.nav li:hover ul.nav-child, ul.nav-child li, ul.nav-child li a {
  display: block;
}

Can someone please suggest how can I hide the second level drop-down menu until the user hovers the mouse over his parent, considering that both items seem to share the same class?

ryansenn · Post by **ryansenn** » Mon Aug 12, 2019 12:27 pm

You can use the ">" selector. https://techbrij.com/css-selector-adjac ... ld-sibling

If the website is hosted somewhere I can have a quick look, sounds pretty simple.

Also for centering use flexbox, it's the modern way of doing it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

laukejas5 · Post by **laukejas5** » Mon Aug 12, 2019 2:20 pm

ryansenn wrote: ↑
Mon Aug 12, 2019 12:27 pm
You can use the ">" selector. https://techbrij.com/css-selector-adjac ... ld-sibling

If the website is hosted somewhere I can have a quick look, sounds pretty simple.

Also for centering use flexbox, it's the modern way of doing it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Thank you very much!!! The ">" selector did it. As for the centering, I still can't get it to work. Problem is, the nav module sets it's own width to the whole page width when I set width:auto, way past the end of menu items. That's why centering doesn't work, it thinks it is already centered. Even with Flex. So far, I haven't found a way to make that module adjust it's width correctly. You can take a look, the website is hosted here:

http://vaterlinija.lt/

P.S. I hope I'm not asking too many questions, but if you got a minute, do you have any ideas why I have extra blank space above the header? As you can see with Inspect, the header module has all the right rules applied to it - no margin, no padding, etc, and there's nothing in the index.php above the header that would create that extra space. What could be the problem?

Post by **Per Yngve Berg** » Mon Aug 12, 2019 7:11 pm

Code: Select all

<div class="custom">
	<p><img style="display: block; border-width: 0px; margin: 0px auto 0px auto;" src="/images/logo.png" width="800" height="290"></p></div>

Why do you have the <p> element?

laukejas5 · Post by **laukejas5** » Mon Aug 12, 2019 10:32 pm

Per Yngve Berg wrote: ↑
Mon Aug 12, 2019 7:11 pm
Code: Select all
<div class="custom">
	<p><img style="display: block; border-width: 0px; margin: 0px auto 0px auto;" src="/images/logo.png" width="800" height="290"></p></div>
Why do you have the <p> element?

Not sure. Header is defined without <p> in my index.php and template.css. In php, the header contains just a position element. The header (and the image) are defined through Joomla Modules and placed into that position element (I made it like this so I can change that image without going into php/css later on).

ryansenn · Post by **ryansenn** » Tue Aug 13, 2019 6:12 am

To center, set these two properties to your ul:

Code: Select all

display: flex;
justify-content: center;

and remove

Code: Select all

width: 80%

To fix the header space, add this:

Code: Select all

div.custom > p {
margin: 0;
}

diaz365 · Post by **diaz365** » Wed Oct 16, 2019 7:25 pm

The menu class are not easy.
See Third Party Menus Paid and Free. JED
https://extensions.joomla.org/category/ ... u-systems/

the wrapper class this wrapper around the module.

Code: Select all

/*Module Wrappers*/
/*\templates\system\html\modules.php*/

/* module suffix */

/* none */
/* no wrapper  */

/*module */
.module{}
h3.module{}
div.module{}


/*Html5 Module Wrapper*/
.moduletable{}
h3.moduletable{}
div.moduletable{}
table.moduletable{}

/*Table Module Wrapper*/
/*div.moduletable{}
table.moduletable{}*/

/*horz Module Wrapper*/
/*table.moduletable{}*/

/*xhtml ModuleWrapper */
/*div.moduletable{}*/

/*Rounded Module Wrapper*/
/*div.module{}*/

/*module outline*/
div.mod-preview{}
div.mod-preview-info{}
div.mod-preview-position{}
div.mod-preview-wrapper{}
div.mod-preview-style{}
/*end Module Wrappers*/

mod menu

Code: Select all

/*********************** mod_menu ***************************/
/*\modules\mod_menu\tmpl\default_url.php*/

/*\modules\mod_menu\tmpl\default_component.php*/
span.image-title{}

/*\modules\mod_menu\tmpl\default_separator.php*/
span.separator{}


/*\modules\mod_menu\tmpl\default_heading.php*/
span.nav-header{}


/*\modules\mod_menu\tmpl\default.php*/
ul.nav menu mod-list{}
ul.nav-child unstyled small{}

The Joomla! Forum™

Defining drop-down menu style in CSS for a Joomla template

Defining drop-down menu style in CSS for a Joomla template

Re: Defining drop-down menu style in CSS for a Joomla template

Re: Defining drop-down menu style in CSS for a Joomla template

Re: Defining drop-down menu style in CSS for a Joomla template

Re: Defining drop-down menu style in CSS for a Joomla template

Re: Defining drop-down menu style in CSS for a Joomla template

Re: Defining drop-down menu style in CSS for a Joomla template

Re: Defining drop-down menu style in CSS for a Joomla template