I am using divi theme with a menu at the top which is aligned center.now I want to align the last two items to the most right side of the bar.
How can I do it?
Thanks for any code or help on this.
You can do this by using the :nth-child() pseudo class selector. Let's say your menu has code which is something like this:
<div class=menu>
<ul>
<li class=menu-item>Menu 1</li>
<li class=menu-item>Menu 2</li>
<li class=menu-item>Menu 3</li>
<li class=menu-item>Menu 4</li>
</ul>
</div>
Now let's say you want to move your 'Menu 3' and 'Menu 4' item to the right, you can target those elements and style them like so:
.menu-item:nth-child(3),.menu-item:nth-child(4) {float:right; /*or margin-left:50px;*/}
By that, only those menus will be targeted and styled. See my pen here
Related
I'm trying to show a horizontally center-aligned Foundation 6 dropdown. I'm attempting to use a dropdown as a tooltip, because it better fits my needs and allows for rich HTML to be inserted into it, where the tooltip does not.
Foundation 6 dropdowns can be positioned by adding classes .top .right .bottom .left. These classes are parsed by the Foundation core Javascript and then the element is given dynamically calculated top: and left: attributes.
Because of this, adding any left, or transform: translate properties to the element are voided by the fact that Foundation takes this into account when dynamically calculating the positioning attributes.
Any ideas short of writing a different class into the javascript?
Use text-center.
<ul class="dropdown menu" data-dropdown-menu>
<li>
Item 1
<ul class="menu text-center">
<li>Item 1A</li>
<li>Item 1b</li>
<li>Item 1c</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Using a CMS for a webshop.
The platform is currently generateing a list for a menu like this:
<ul class="menu">
<li class="item*">
Category 1
<ul class="level 1">
<li class="item*">Item 1</li>
<li class="item*">Item 2</li>
<li class="item*">Item 3</li>
</ul>
</li>
<li class="item*">Category 2</li>
<li class="item*">Category 3</li>
</ul>
I want to add bullets to this list and was thinking of using li:before and have a content:url(image.png).
The problem is that I want a diffrent image for the "Categorys" and the "Items"
How can I slove this?
Tried ul.menu li:before but that selcets all li in the tree.
The classes that is generated on the li's I dont have mutch control over. The classes generated on the li´s is like "item 1" "item 2" and so on
Is this possible with css or do I need to use jquery?
You are using the space selector to assign your bullet image, which selects all descendants and therefore will add a bullet image to deeper levels too.
Instead, use the greater-than selector to select only immediate children. Like this, you only select one level at a time.
ul.menu>li:before {
/* 1st level */
}
ul.menu>li>ul>li:before {
/* 2nd level */
}
ul.menu>li>ul>li>ul>li ...
I have some nested <ul>s and I want them to be the same height: the height of the tallest one. I cannot specify the height of any <ul> since it depends on the amount of <li>s in it.
I figure I could solve this pretty easy using some js, but I am curious if this could be fixed using CSS.
I created a simple fiddle to demo: http://jsfiddle.net/vnFLK/2/
<nav>
<ul>
<li>Li 1
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li>Li 2
<ul class="green">
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
</ul>
</nav>
The <ul> with green borders is supposed to determine the height of the root <ul> and then I want the sibling <ul> to get the same height. The green <ul> is pushed 200% to the right just to be clearer.
This is a simplified representation of a navigation where a <ul> is a submenu that is going to be pulled over the parent one. Therefore they need to be the same height to prevent the parent menu being shown.
/Erik
Absolutely-positioned elements are no longer part of the document flow - they act as a new context. Therefore the parent element has no idea what size the child element is and cannot adjust its own size to match it.
There is no CSS solution for this. You need to use JavaScript.
I want to keep hover color on parent list, when child list is hovered.
Here's example where second menu has submenus and when you hover over submenus, color of main menu is gone.
http://jsfiddle.net/ya8ga/
Thanks
HTML
<div id="menu2">
<ul>
<li class="l1">Home</li>
<li class="l2 dropDown">Hotel
<ul class="sub1">
<li class="l1">Hotel Sub 1</li>
<li class="l2">Hotel Sub 2
</li>
</ul>
change this:
#menu2 li a:hover{background:#89E00C; color:#2D1C13;}
to this:
#menu2 li:hover{background:#89E00C; color:#2D1C13;}
I am using superfish menu and I am having a problem which I can't figure out although I'm sure the answer is probably obvious and I'm just missing it...
Basically my a elements are not expanding to fill their containing li elements, even though the a elements are set to display:block
Please see example here:
http://www.spiritlevel.co.uk/fpatest/index_hover2.html
css is here:
http://www.spiritlevel.co.uk/fpatest/css/superfish.css
http://www.spiritlevel.co.uk/fpatest/css/superfish-vertical.css
Here's the relevant HTML
<div id="homenav">
<ul id="nav" class="sf-menu sf-vertical">
<li id="company">COMPANY
<ul id="companymenu">
<li id="profilelink">Profile</li>
<li id="activitylink">Activity</li>
<li id="strategylink">Strategy</li>
<li id="teamlink">Team</li>
<li id="financelink">Finance & Governance</li>
</ul>
</li>
<li id="development">DEVELOPMENT
<ul id="developmentmenu">
<li id="partnerslink">Development Partners</li>
<li id="sociallink">Social Responsibility</li>
</ul>
</li>
<li id="projects">PROJECTS</li>
<li id="contact">CONTACT US</li>
</ul>
</div><!--end homenav -->
A second issue I am having is how to get the second level menu to appear in the same place for each first level link. If you hover over company then it's 2nd level nav appears in the right place. But if you hover over development, it appears 1 row too low - i would like it to appear in the same place as the company menu did
Can anyone help me out with this please? thanks
Remove padding-right from .sf-menu a.sf-with-ul (superfish.css line-93) and add width 100% or 140px (home.css line 75) in #nav li a. I've tested it on your site and works fine. Tested in chrome and ff.
The reason your links aren't expanding to fill the box is because they are floated left. Remove that and you should be fine.