I am using Joomla 3.6.5.
Using standard modules:
Using level 1 menu in the top.
Same menu but starting form level 2 (and more) to the left.
A standard breadcrumb in the middle to show articles (and it's "you are here" in the bottom).
I have 2 problems:
Dropdown (on selected) does not work when you begin at level 2. Either you have to see everything - and it's a very long list, or you can only see the level 2 items.
You don't see which menu item that is selected on the side menu.
Is there a way to fix this? Or maybe I have to download some more advanced menu plugin?
Got the second part to work (to see selected submeny item). Added this to template.css (row 3019):
.nav-pills > .current > a,
.nav-pills > .current > a:hover,
.nav-pills > .current > a:focus {
color: #fff;
background-color: #f2981d; /* Or standard #005e8d*/
}
.nav-pills ul a,
.nav-pills ul a:hover,
.nav-pills ul a:focus {
padding: 4px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.nav-pills ul > .current > a,
.nav-pills ul > .current > a:hover,
.nav-pills ul > .current > a:focus {
color: #fff;
background-color: #f2981d; /* Or standard #005e8d*/
}
Also had to change the Modules Menus - Menu Class Suffix to " nav-pills nav-stacked"
Related
my main menu is aligned in left I want to move my main menu items in the center of the page.I'm using protostar template.
Assuming you are using Joomla 3.5 or later, create a file at: templates/protostar/css/user.css if it doesn't already exist and add the following contents to the file:
.navigation {
text-align: center;
}
.navigation .nav {
display: inline-block;
}
You open the file template.css in folder templates\protostar\css\template.css if you use template protostar.
And find the line of code:
.navigation .nav-pills {
margin-bottom: 0;
}
add code:
.navigation .nav-pills {
margin-bottom: 0;
display: flex;
justify-content: center;
}
As the following image
How to add line number to kendo ui editor. I dont see any setting to enable line number
http://docs.telerik.com/kendo-ui/controls/editors/editor/overview
There is a route using CSS3 Counters. I'm not familiar with the Kendo Editor, so be sure to add any other elements besides the p and ul > li base child elements in the CSS.
You can save the following CSS to be loaded within the editor:
body {
counter-reset: editor;
padding-left: 3em;
}
body > p,
body > ul > li {
counter-increment: editor;
}
body > p:before,
body > ul > li:before {
content: counter(editor);
background: #CCC;
position: absolute;
left: 1em;
height: 100%;
width: 2em;
}
To add custom CSS within the editor, you would save the above into a file and in your initialization:
$("#editor").kendoEditor({
stylesheets: ["path_to_your.css"]
});
I'm trying to build a fairly simple Sass mixin for a dropdown menu built as an html list
My html is
<div class="parent">
<div class="name">My Name</div>
<ul>
<li>profile</li>
<li>logout</li>
</div>
then I have a mixin which is applied to the UL
#mixin dropdown() {
// create a dropdown list from a ul
position: absolute;
display: none;
margin: 0;
padding: 0;
list-style-type: none;
&:hover {
display: block;
}
li {
padding: 0;
background-color: red;
}
li a {
#include button();
padding-left: 0;
}
}
Then I am trying to simply make the css by including the mixin in the parent
.parent {
position: relative;
ul {
#include dropdown();
}
&:hover ul {
display: block;
}
}
The problem is that the mixin needs to set ul { display:block} when I hover on the parent so the css needs to read .parent:hover ul {displa:block} but of course, I'd prefer to have it assigned to the parent rather than add the class on the parent itself.
I thought I should be able to do * &:hover or .parent:hover & or something of that sort, but any combination I've tried has not worked.
Using .parent:hover & creates css of
header .parent ul:hover, .parent:hover header .parent ul {
display: block; }
Which is not right.
Suggestions? Without having to specify the parent element would be preferred.
Originally I was trying to put the mixin no the dropdown itself, but thanks to #cimmanon pointing out that I didn't include how I am using the mixin, I reconsidered the approach and have re-created the mixin to be applied to the parent, which works pretty well, but somebody may have a better way.
.parent {
#include dropdown();
}
#mixin dropdown() {
display: relative;
// create a dropdown list from a ul
&:hover ul {
display: block;
}
ul {
position: absolute;
display: none;
margin: 0;
padding: 0;
list-style-type: none;
&:hover {
display: block;
}
}
I'm having an issue where I cannot get my sub nav to hide until on Hover. I assume I accidentally just deleted some kind of css that I need, but I cannot for the life of me figure out what I did.
The link to the dev site is: http://fallriverbenefits.com/dev/
I solved this by adding this to the css:
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
I'm making a dropdown list and the items have quite distinct lengths, so a standard width for all the items makes it look strange, however I can't get the dropdowns to behave in a way that doesn't look strange anyway. I'd like for the dropdown unordered lists to be centered to their parents but without predetermining a set width. I've seen ways to do this with js, but wondering is there a way to acheive it just with CSS?
hhttp://jsfiddle.net/QacGj/2/
<div id="menu">
<ul>
<li>item 2</li>
<li>parentcategory
<ul class="child">
<li>1</li>
</ul>
</div>
#menu
{
display: block;
margin: 0 auto;
padding: 0;
text-align: center;
width: 100%;
}
#menu li
{
display: inline-block;
position: relative;
}
#menu li a
{
padding: 0 10px;
}
#menu li a:hover
{
text-shadow: 0 0 15px #FFF, 0 0 15px #FFF;
}
#menu li ul
{
border: thin #DDD solid;
list-style-type: none;
padding: 5px 0;
position: absolute;
margin: 0 auto;
width 100%
z-index: 99999;
}
#menu li ul li
{
width: 100%;
display: block;
padding: 5px;
text-align: left;
}
#menu li:hover > ul.child
{
display: block;
}
#menu li > ul.child
{
display: none;
}
I would try to achieve this so, that the main link and its child popup were inside the same wrapper, with automatic margin left and right. That way they would both be centered with the same center point. Obviously ul li structure won't work that well for it, or if it does, I'm too tired to think properly :)
Here's an example: http://jsfiddle.net/QacGj/4/