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:
<body>
<div class="nav">
<nav>
<jdoc:include type="modules" name="navigation" style="none"/>
</nav>
</div>
</body>
And from template.css:
.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?
Related
i am using business one wordpress theme, i want to place a notice with bigger and bold text in the menu, so i created a menu item and added a new css class.
.myclass {
font-weight: 700;
color: #fff;
font-size: 24px;
pointer-events: none;
cursor: default;
}
`
This class only makes the menu item font bolder but the color and size stay the same?? Help would be much appreciated.
Your style could be overwritten byt the themes default style.
Try to write the style with the parent tags like
nav ul.classname .myclass {
/* Style*/
}
If it doesn't work then only use !important to write the style like
nav ul.classname .myclass {
font-weight: 700;
color: #fff !important;
font-size: 24px !important;
pointer-events: none;
cursor: default;
}
Hello guys and girls,
I've been given my first WordPress build at work, with freedom on pretty much anything. I chose to use Altitude pro as a theme with Genesis as a framework.
I love the theme but, for a service page the theme is not exactly fantastic. To spice it up a bit, I'd like to create a custom header design for every service page on the site.
This would be a coloured background over the top 1000px of the page or so, that has a solid colour with some patterns on top.
Due to my inexperience though, I'm not really sure on how to do it and my PHP knowledge is not fantastic.
Could anyone please assist?
Thanks!
You can check here for normal headers or even fixed headers. They explain well. http://www.w3schools.com/css/css_navbar.asp
Here is a code that makes a fixed header with menus. If you don't want to make it fixed you can just delete "position: fixed;".
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
</div>
</body>
</html>
I've ran into a problem using a custom WordPress menu that I can't seem to solve, so after doing a lot of searching the web & failing to fix this over the past few days, I've decided to see if anybody here on StackOverflow can help.
Please note: I would use a Walker function for this but I'm too far gone with the code right now and the way the design works I'm having to build the menu this way.
My snippet for my dropdown: http://pastebin.com/8Stfs90c (would post but it would crucify the screen).
I’m having trouble with the 3rd level of my dropdown menu. In this image: http://s13.postimg.org/lxhslt0lz/image.png you can see that there’s a <li></li> that I’ve highlighted (Pages, About Me, About Us). The structure is as follows
Pages (Parent)
About Me (Parent: Pages)
About Us (Parent: About Me)
And these are fine, BUT when it goes to the third dropdown, it cuts of the <li> and leaves the rest of the Pages children and puts them into a separate container and not the <li> for Pages.
So it should work like so:
Pages (Parent)
About Me (Parent: Pages)
About Us (Parent: About Me)
Right Sidebar (Parent: Pages)
Left Sidebar (Parent: Pages)
Our Process (Parent: Pages)
And all though it may look like this on the dropdown (visually), as you can see in the code it isn’t represented by this. I think the problem I’m having is the checks I’m doing for closing the </li> is wrong. I’ve had this problem for a few days and I just can't seem to fix it. I was going to post this on the WordPress based forum but it's more of a PHP error than anything else.
Here’s a quick screenshot of me hovering over the elements that should be in Pages: http://s23.postimg.org/ef4ame6m3/image.png - as you see they’re separated from the <li>.
To replicate this what I've done is just created a menu structure in WordPress and used the code that's in the snippet (basically I just pasted it into the index.php file) to show how it's being represented.
I really hope somebody can help with this as it has been driving me mad and put a holt on my project for the past few days.
Apologies for the links above, I would post them directly in (screenshots & code) but I didn't want to take away from the actual problem.
If somebody does manage to provide me with the solution I'd be more than happy to buy you a virtual coffee or two!
Out of curiosity, I could be missing the point, is there a reason why would not want to use wp_nav_menu() to handle all of this?
Ex below would output the correct structure for you to theme as your screenshot if applied in your context?
wp_nav_menu( array( 'container' => 'nav', 'container_class' => 'your-class', 'fallback_cb' => 'wp_page_menu', 'theme_location' => 'primary-menu' ) );
Thanks.
Had a quick look at the code, I suppose line 100-130 are dealing with the third dropdown. Actually whats happening is you already have an ol on line 105, then its again being called through the loop on line 122.
echo "<ol><li><a href='" . $link . "'>" . $t->title . "</a></li></ol>";
I think the problem is on line 128 you have to remove ol from the end and create a new condition just for this.
Sorry if i am not being of any help but its really hard to picture the whole code in mind without seeing it. If you are really stuck send the ftp details in chat and i can have a look.
Hi There try this css code to create multiple Nested menu create.
WP code for menu in header.php
<nav class="photoshoot-menu">
<?php wp_nav_menu(array('theme_location' => 'primary','container' => ' ')); ?>
</nav>
CSS Code Add in your style.
.photoshoot-menu {
float: right;
width: auto;
padding-left: 0px;
padding-right: 0px;
}
.photoshoot-menu ul {
padding-left: 0px;
margin: 0px;
}
.photoshoot-menu > ul li {
display: inline-block;
position: relative;
text-transform: uppercase;
margin: 3px 2px;
position: relative;
}
.photoshoot-menu > ul > li > a {
color: #212121;
display: inline-block;
padding: 8px 20px;
border: 1px solid #4f4f4f;
border-radius: 4px;
}
.photoshoot-menu > ul > li > a:hover,
.photoshoot-menu > ul > li > a:focus,
.photoshoot-menu > ul > li.current_page_item > a {
background-color: #343434;
color: #f45c06;
}
.photoshoot-menu ul ul {
border-radius: 4px;
border: 1px solid #4f4f4f;
background-color: rgba(38, 38, 38, 0.95);
opacity: 0;
position: absolute;
top: 42px;
width: 100%;
min-width: 170px;
z-index: 1;
visibility: hidden;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.photoshoot-menu ul li:hover > ul {
opacity: 1;
visibility: visible;
}
.photoshoot-menu ul ul li {
width: 100%;
}
.photoshoot-menu ul ul li a {
display: inline-block;
line-height: 16px;
padding: 5px;
color: #FFF;
width: 100%;
}
.photoshoot-menu ul ul li a:hover,
.photoshoot-menu ul ul li a:focus {
color: #f45c06;
}
.photoshoot-menu ul ul ul {
left: 99%;
top: 0px;
}
<nav class="photoshoot-menu">
<ul class="menu" id="menu-all-pages">
<li>Home
</li>
<li>Level 1
<ul>
<li>Level 2
<ul>
<li>Level 3
<ul>
<li>Lorem Ipsum
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Sample Page
</li>
</ul>
</nav>
I am trying to design gallery of images using php and css. I have placed the images in unordered list like,
<ul style="list-style-type:none;">
<?
while($data=mysql_fetch_row($result))
{
$pic=$data[2];
if ($pic)
{
$path="http://www.myworkdemo.com/pecifica/photos/".$pic;
}
?>
<li style="list-style-type:none; float: left; margin-left:4px; margin-top:5px; margin-bottom:5px;">
<img src=<?=$path?> width=300 height=240></img>
<!--<td class='delete'><a href='addproject.php?ProjId=<?=$data[0]?>&action=edit' >Edit</a></td>-->
<div class='delete'>Delete</div>
</li>
</ul>
And i got all the images but one bullet(starting) was not removed from the list. my gallery after css formatting is like
and due to that bullet i lost the alignment of first row images. please guide me.
Very easily:
list-style-type: none;
Also consider list-style: none; if the bullet is actually an image not rendered by the browser.
It lies in two of your CSS files.
Line 514 http://www.myworkdemo.com/pecifica/admin/css/style1.css
.block .block_content ul li {
background: url("../images/li.gif") no-repeat scroll 0 7px transparent;
Line 523, http://www.myworkdemo.com/pecifica/admin/css/style.css
.block .block_content ul li {
background: url("../images/li.gif") no-repeat scroll 0 7px transparent;
Disabling both of these with firebug eliminated the bullet (which is actually a custom gif file). You'll need to review how you're using the involved classes.
.hi guys, i have a little problem on styling my menu bar. i have the following code:
#can_header {
width:1024px;
height:140px;
background-color:#8D96A8;
}
#can_header ul{
list-style-type:none;
margin: 0;
padding: 110px 0 0 550px;
font-family: adolph;
text-transform: uppercase;
font-size: 1em;
}
#can_header li{
display:inline-block;
line-height: 15px;
border-right: 2px solid #CCC;
}
#can_header li#item-104{
border-right: none;
}
#can_header ul a:visited{
color:#CCC;
text-decoration:none;
margin-right:15px;
margin-left:15px;
}
#can_header ul a:link{
color:#CCC;
text-decoration:none;
margin-right:15px;
margin-left:15px;
}
#can_header ul a:hover{
color:#EB1886;
}
#can_header ul a:active{
color:#FFFFFF;
}
what i want to do is that when i click one of the links on my ul the color of the selected link will permanently change while on the page of the link. with my present code the color of the link only changes while on-click.. but when the page changes the color will be back to normal. TIA! More Power!
.By the way I'm using Joomla, i'm just editing the CSS of the template that i made.
I'm afraid what you want to do isn't possible with CSS only. What you can do is create a css class that indicate that an item in your menu is selected and assign that class to your li element either using javascript or server side when you render the template
You can't do that with CSS alone, you need to add some class to the selected link (ie class="selected") using Javascript or PHP.
Then you can add a style rule for links with class .selected.
Their right you can't do that with CSS alone. You can use :active and change the text-color, or whatever, while it is being clicked down (aka onmousedown) but you can't have it change like blue + click = red.
JQuery should be able to help you with this though.
This will be handled by the menu module you are using to display the menu. Most modules have the option to turn on active highlighting which basically does what everyone is talking about, adds a CSS class to the active menu item. Chances are all you need to do is turn on the active highlighting on and add the appropriate CSS.
Also, I noticed you are turning off a right border in one of the menu items by using the itemID. You would be better off using the :lastchild psuedo selector in case you ever change the order of your menu items or remove the one you have chosen to be last.
Instead of #can_header li#item-104 use #can_header li:last-child
You should add css class programmatically to child object based on requested page.
An Example with php:
function GetFileName()
{
$currentFile = basename($_SERVER["PHP_SELF"]);
$parts = Explode('.', $currentFile);
return $parts[0];
}
$basename = GetFileName();
<li>
<a href="index.php" <?php if($basename =="index") echo "class='current'"; ?>>Home</a>
</li>
<li>
<a href="about.php" <?php if($basename =="about") echo "class='current'"; ?>>About</a>
</li>