In this nice Bootstrap navbar with submenus, I would like to get rid of the light-grey background (#f8f9fa) that persists on the dropdown item when hovering the submenu.
That's probably a default bootstrap css but I can't find how to disable it.
Here's the codepen : https://codepen.io/surjithctly/pen/PJqKzQ
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
You may change this color to whatever you like by overriding the CSS this way:
.dropdown-item:focus, .dropdown-item:hover {
background-color: #fff;
}
In the example above, I set it to white.
Related
I am trying to get my top menu to be exactly full width of the screen at all times. Sadly, while it works OK on desktop, it keeps extending beyond the expected width when on mobile.
To give some context: I'm trying to build a child theme of the "Rookie" theme (https://wordpress.org/themes/rookie/).
My goal at this point is to replace the default menu of the theme with a top bar, on which I want the burger menu on the left, logo in the middle and the search button on the right.
This is already done, but for a reason I do not understand, when testing on mobile, the top bar is exceeding the expected 100% width. This can be observed when trying with "Phone 6/7/8" of the Chome dev tools. I also tried with a physical device and got the same result.
The page is https://gornik2.kosimus.eu/
Picture from the dev tools
I spent several hours trying to figure it out and I essentially ran out of ideas at this point. I defined the width to 100%, 100vw and so on, tried max-width, checked parent elements and made sure that the width is not increased anywhere.
Pretty sure there is something incredibly stupid and small I am missing. Ideas would be greatly appreciated.
Thanks!
PS There is a bunch of other issues as well on that page (colors etc.
- please just ignore those).
/* Make sure that the header is full-width */
.site-header {
width: 100%;
}
#masthead {
width: 100%;
}
/* Get rid of the horizontal unordered list menu. Always use the mobile-like hamburger menu. */
.main-navigation ul {
display: none;
}
.main-navigation.toggled .nav-menu {
display: block;
background: #000000;
}
.main-navigation li {
float: none;
}
/* Menu bar to the top */
.main-navigation {
display: block;
position: fixed;
top: 0;
height: 65px;
width: 100%;
}
/* As the top bar is 65px high, the open menu should have exactly that margin, so that they don't overlap */
.main-navigation.toggled .nav-menu {
margin-top: 65px;
}
/* Display navigation over other stuff */
#site-navigation {
z-index: 100;
}
/* Top bar styling */
/* Hamburger menu */
.main-navigation .menu-toggle {
/*Send the whole button to the left*/
display: inline-block;
width: 20vw;
height: 65px; /* Set the height of the whole top bar to 65 pixels */
background: #ffffff;
position: fixed;
top: 0;
left: 0;
}
.main-navigation .menu-toggle .dashicons {
display: inline-block;
color: #000000;
position: relative;
left: 27%; /*Required to be positioned properly on the white bg*/
font-size: 4rem;
vertical-align: baseline;
}
/*White BG for the hamburger button*/
.main-navigation.toggled .menu-toggle {
background: #ffffff;
}
/* We're using the full screen search from a plugin, so the field here is not necessary */
.main-navigation .search-form .search-field {
display: none;
}
/* Search button */
.main-navigation .search-form .search-submit {
display: inline-block;
width: 20vw;
height: 65px;
background: #ffffff;
color: #000000;
position: fixed;
top: 0;
right: 0;
padding: 8px 16px;
}
.main-navigation .search-form .search-submit:hover {
background: #ffffff;
color: #000000;
}
.main-navigation .search-form {
display: inline-block;
margin: 0;
}
.main-navigation {
background-color: #1a754a;
}
/* Logo centering and styling */
.site-branding {
display: inline-block;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: calc(50% - 32.5px);
z-index: 110;
}
.site-logo {
margin: 0px;
float: none;
}
.site-logo img {
max-height: 65px;
}
.site-content {
margin-top: 65px;
}
The pseudo element (:after) added to th tag of the LEAGUE TABLE is causing this issue. This issue can be fixed if the position value changed from "absolute" to "relative".
.sp-data-table .sorting:after {
content: "\f156";
color: transparent;
/* position: absolute; */
position: relative;
}
Screenshot
I'm trying to add a dropdown menu to my nav as detailed in the docs here.
By default, .dropdown-content is set to top: 0;. And here is the default behavior:
If I change the top to 50px in materialize.css it actually moves it up 50 pixels and sets the element style to top: -50px.
Here is the code:
.dropdown-content {
top: 50px;
}
But when it renders, the element looks like this:
<ul id="dropdown1" class="dropdown-content" tabindex="0" style="display: block; width: 139.297px; left: 900.891px; top: -50px; height: 216px; transform-origin: 0px 0px 0px; opacity: 1; transform: scaleX(1) scaleY(1);">
(The key being `top: -50px;)
I tested with multiple values, here is 65:
.dropdown-content {
top: 65px;
}
<ul id="dropdown1" class="dropdown-content" tabindex="0" style="display: block; width: 139.297px; left: 900.891px; top: -65px; height: 216px; transform-origin: 0px 0px 0px; opacity: 1; transform: scaleX(1) scaleY(1);">
(now it is top: -65px)
Here's a screenshot if you care to take a look
Why is it inverting this value? How can I make the dropdown so it doesn't occlude the main menu?
I checked it and i see the best way to do that becuase the styles comes from JS which is have special calc i have checked and if you want to avoid any fixed height maybe you will have padding or anything in the header so the best to give the top:100% and to use !important to be stronger than the JS
give the class .dropdown-content top: 100% !important;
.dropdown-content {
top: 100% !important;
}
Looks like this option has been added in Materialize v1.0.0:
https://materializecss.com/dropdown.html
via the option coverTrigger on instantiation. It defaults to true (must set to false to achieve desired behavior).
Not a solution, but as a workaround I added a "spacer" element to the top of the dropdown:
<li class="spacer"></li>
.dropdown-content {
background: none; //overwrites default materialzie value of white
}
.dropdown-content li > a, .dropdown-content li > span {
background-color: white; //needed now that the whole menu has no background
}
.dropdown-content li:hover, .dropdown-content li.active {
background: none; //no white on hover
}
.dropdown-content li.spacer {
min-height: 65px; //height of the nav element
cursor: default; //so it doesn't look like a menu option
opacity: 0; //the magic
}
And here's the result:
<mat-menu class="abc" #menu="matMenu" [overlapTrigger]="false">
<div mat-menu-item >
11111
</div>
<div mat-menu-item >
22222222
</div>
</mat-menu>
Hope this works
I am trying to me a Bootstrap dropdown menu to be fullscreen when open.
I have managed to do that with several ways, but when I move the mouse out of the menu to close it, a smaller menu appears behind my full-width.
Can you spot where is that and remove it?
https://www.suug.co.uk/sustainabilityhub/
Fullscreen code:
.nav > li.dropdown.open {
position: static;
}
.nav > li.dropdown.open .dropdown-menu {
display: table;
border-radius: 0px;
width: 100%;
left: 0;
right: 0;
}
This looks to work perfect, but i dont want to have to top:77px
.dropdown-menu {
position: fixed;
top: 77px; /*height of main menu*/
width: 100%
}
I need to center the items on a list of my social-media menu (the 4 icons under the title on the sidebar).
I got to made them distribute evenly (each item width is 25% since I have 4), the "ul" is displayed as table.
However, the icons inside each "li" stick to the left ! Any ideas ? THANKS !
http://www.blogderod.com/
.social-navigation {
margin: 0 15% 10%;
display: table;
width: 70%;
}
.social-navigation li {
display: inline-block;
text-align: center;
float: none;
width: 25%;
}
Add the following to your CSS:
.social-navigation a,
.social-navigation a:before {
width: 100%;
}
This makes both the link and the social icon take up the full width of the li, allowing them both to centre correctly.
Add "text-align: center;" on the LIs and make the links inside the LIs "display: inline-block;".
Edit this class like this:
.social-navigation a:before {
content: "\f415";
font-size: 24px;
position: absolute;
top: 0;
left: 20px;
Change top/left position as you wish.
Make this changes in your CSS
media="all"
.social-navigation a:before {
content: "\f415";
font-size: 24px;
/* position: absolute; */
/* top: 0; */
/* left: 0; */
}
Hope that helps
I've a problem with my Dropdown menu. When you hover it, it will push the Footer away, and it will create a freaky effect that you can scroll the whole page. (This is only when the dropdown reach the footer)
I have tried lots of things like max-height etc, but it wont work.
Website:
{fixed}
If you hover the 'Zippo' menu item, the freaky things will come.
How can i fix this?
Thanks!
Wouter0100
You can set your dropdown menu position as absolute :
#nav li ul {
margin: 0px;
padding: 0px;
display: none;
position: absolute;
top: 25px;
z-index: 99; /* edited */
}
Change the following class from :
#nav li ul {
margin: 0px;
padding: 0px;
display: none;
}
to
#nav li ul {
display: none;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 24px;
z-index: 100;
}
Footer drop down because of the height of the menu nav height
to over come this you need to pull menu out of the normal Dom by position it
#menu {position: relative;}
#nav {z-index: 100;position: absolute; }