<ul class="nav navbar-nav pull-right" style="margin-right: 25px;" >
<li> My Profile </li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
My Blog <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Sports</li>
<li class="divider"></li>
<li>Foods</li>
<li class="divider"></li>
<li>Entertainment</li>
<li class="divider"></li>
<li>Travel</li>
</ul>
</li>
how to delete the padding on my dropdown-menu list because its destroying the background color i put in there. This is the image of my current dropdown-list which having some problem on padding:
Here are few things
Incorrect html structure
<li>Foods</li>
change it to
<li>Foods</li>
show us the style for li, a and .divider
which one is using background: #809109;
I guess you need to remove padding of li
.dropdown-menu > li{
padding:0px
}
or you can add background-color for li too
.dropdown-menu > li{
background-color:#809109;
}
Though the problem statement is incomplete and the html syntax is faulty, still this problem can occur without those. The problem lies in inserting the divider or horizontal rule, whatever separator you are using. For these, the Unordered List tag adds additional padding which might be the case in this problem. You can use one of the methods mentioned in this answer to solve your problem:
Remove padding from unordered list
Related
I'm trying to display a navbar Dropdown to open to the left, but it keeps opening to the right. My dropdown is located at the far right of the navbar and when I open it, it opens to the right, going outside of the layout.
I've already tried the "pull-right" and "pull-left" solutions to no avail. Also the "dropdown-menu-right" and "dropdown-menu-left" solutions don't work.
html5
<ul className="nav navbar-nav navbar-right">
<li className="nav-item dropdown">
<a className="nav-link" id="walletOptions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src={require('../img/wallet.svg')} alt="easyfeedbacktoken" height="40px" />
</a>
<ul className="dropdown-menu" aria-labelledby="walletOptions">
<ImportMnemonicModal onUpdateMnemonic = {this.props.onUpdateMnemonic}/>
<ShowMnemonic mnemonic = {this.props.mnemonic}/>
<DeleteWallet onUpdateMnemonic = {this.props.onUpdateMnemonic}/>
</ul>
</li>
</ul>
I want the dropdown menu to drop to the left. It always drops to the right.
Try changing it from a dropDOWN to a dropLEFT.
That way it always opens to the left
Change :
<li className="nav-item dropdown">
To :
<li className="nav-item dropleft">
Complete code :
<ul className="nav navbar-nav navbar-right">
<li className="nav-item dropleft">
<a className="nav-link" id="walletOptions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src={require('../img/wallet.svg')} alt="easyfeedbacktoken" height="40px" />
</a>
<ul className="dropdown-menu" aria-labelledby="walletOptions">
<ImportMnemonicModal onUpdateMnemonic = {this.props.onUpdateMnemonic}/>
<ShowMnemonic mnemonic = {this.props.mnemonic}/>
<DeleteWallet onUpdateMnemonic = {this.props.onUpdateMnemonic}/>
</ul>
</li>
</ul>
Source bootstrap (https://getbootstrap.com/docs/4.0/components/dropdowns/#dropleft-variation)
The Dropleft, Dropup and Dropright solutions didn't worked in my particular situation.
Neither the "pull-right" or "pull-left" solution.
I was able to force the Dropdown to drop into a specific coordinates using the following solution:
.nav .dropdown{
cursor: pointer;
position: absolute;
left: 88%;
top: 30%;
}
.dropdown-menu{
cursor: pointer;
position: absolute !important;
left: -8em;
top: 3em;
}
Making the dropdown button be in a specific position and the dropdown menu drop exactly how I wanted it to.
For Smaller devices, I just used #media and put another set of rules in order for the dropdown menu to work properly.
I'm having trouble figuring out how to solve this CSS problem.
The code is create by a WordPress plugin so have limited possibilities when it comes to naming the classes and so on.
This is the code:
<li class="page_item page-item-365 page_item_has_children current_page_item has_children”>
<a href="http://www.xxx.dk/side1/side2/“>Side 2</a>
<ul class="children">
<li class="page_item page-item-556”>
<a href="http://www.xxx.dk/“>punkt 1</a>
</li>
<li class="page_item page-item-556”>
<a href="http://www.xxx.dk/“>punkt 1</a>
</li>
<li class="page_item page-item-556”>
<a href="http://www.xxx.dk/“>punkt 1</a>
</li>
</ul>
</li>
The problem is that all of my links become bold when I'm styling them. I only want it to happen on the current page (selected page). I have tried with the following CSS code, but without luck:
li.current_page_item a:first-child {
font-weight: bold;
}
I believe I found a solution - dont know if I understand it but it works ;)
.current_page_item > a {
font-weight: bold;
}
In your case, every a is the first child of a li.
What you are searching for is:
li.current_page_item a {
Furthermore all of your menu entries link to the same id. So I guess every of it get the "current" class, if one is selected. Add some other links to the menu and you will see, that it will work!
You were close to the solution ;-)
Have a look here, is this what you looking for?
li.current_page_item > a:first-child {
font-weight: bold;
}
Example on Codepen:
http://codepen.io/funkysoul/pen/XNVdbE
please recheck your code. refer the screenshot.
Here is the fiddle
https://jsfiddle.net/r2zmxzzd/
As you can see, the dropdown in the top menu "Alumni" is working but the dropdown in the lower menu i.e. "About UET" is not working.
I've been staring at the code for more than 2 hours but still can't get that damn dropdown to appear. I've tried inspecting the elements. The dropdown appears in the DOM as active but still doesn't show up.
Here is the code of the dropdown
<ul class="nav navbar-nav navbar-right">
<li class="dropdown primaryNavItem">
About UET <span class="caret"></span>
<ul class="dropdown-menu">
<li>Historic Profile</li>
<li>Vision & Mission</li>
<li>Development Projects</li>
<li>Core Team Members</li>
<li>UET Progress Report 2015</li>
<li>Student Teacher Ratio</li>
<li>Information</li>
<li>Faculty Statistics</li>
<li>FAQs</li>
<li>Budget</li>
<li>External Linkages</li>
<li>International Funding</li>
<li>Spin off companies</li>
<li>Progress Profile</li>
<li>Site map</li>
<li>Contacts List</li>
</ul>
</li>
</ul>
Can anyone please tell me why the lower dropdown isn't appearing?
Thanks in advance.
You have this
header {
overflow: hidden;
height: 135px;
}
and the dropdown is behind. Remove overflow:hidden
You have to use:
header {
overflow: visible;}
Your <header> has an overflow: hidden css property. That's causing the dropdown to be clipped out of view.
Remove overflow: hidden from your header: https://jsfiddle.net/r2zmxzzd/1/
Hi your dropdown is working fine but you have to change css on headersee screenshot
Thanks
It's because you're using an a tag:
About UET <span class="caret"></span>
Should be:
<button type="button" class="primaryNavLink dropdown-toggle" data-toggle="dropdown">About UET <span class="caret"></span></button>
And then style as appropriate
I need a help. I was doing a drop up menu with share icons.
My problem is this: I'd like that when I pass the mouse over the main-share icon in the footer and than go to select another icon (like facebook), the main icon remains selected like as mouse hover, but it don’t works.
<div class="footer large blue">Footer Blue
<div class="pull-right buttons">
<ul>
<li><a class="btn2 large share2 blue" href="#">Share</a>
<ul>
<li><a class="btn large rss" href="#">RSS</a>
</li>
<li><a class="btn large twitter" href="#">Twitter</a>
</li>
<li><a class="btn large plus" href="#">G+</a>
</li>
<li><a class="btn large facebook" href="#">Fb</a>
</li>
</ul>
</li>
<li><a class="btn2 large btt blue" href="#">Back to Top</a>
</li>
</ul>
</div>
I think the problem is that the elements li and a, are two independent tags.
Watch this image to understand it better what am i saying (because i’m not able to explain it better ._.)
http://db.tt/Kujz3Pv4
Here's the code:
http://jsfiddle.net/zPavan/KHWJ4/2/
If there are any problems or have suggestions on the code, I thank you for the advice!
Instead of depending on the hovering of the <a> specifically, make it depend on the list item that contains the entire <ul>:
li:hover > .btn2.blue {
background-color: hsl(197, 59%, 30%);
}
I would suggest giving that specific li a class like .share that you can use as well.
http://jsfiddle.net/ExplosionPIlls/KHWJ4/3/
I think this will do it:
.buttons ul li:hover > a {
background-color: #1f5f79;
}
I want to select all li which not contains a tag in css:
ul.sf-menu li:not(a)
But looks like it is not working.
Need help
<ul class="sf-menu sf-js-enabled sf-shadow">
<li>
<a href="/ ">
</li>
<li> need to select this li because it is not contains a href
A
<ul style="visibility: visible; display: block">
<li>
<a href="/B-1">
</li>
<li>
B-2
</li>
</ul>
</li>
<li>
Two things
1) Your selector doesn't match the question you're asking. It currently selects every LI that is not an Anchor. This should be every LI on the page.
2) What you want can't be done with CSS right now. Your best bet would be to use some JavaScript to do this. For instance, the following jQuery would work.
$("ul.sf-menu li:not(:has(a))").doSomething()