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%
}
Related
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.
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 would to add Jquery Mega Menu to top menu with search box.
I was able to add the menu to top but the search box is not showing correctly.
please see Demo2.sarwana.co.uk
I added following css but still cant get it to show in my menu correctly.
.woocommerce-product-search {
display: none;
}
.woocommerce-product-search {
display: block;
float: right;
position: relative;
margin-top: -40px;
}
https://drive.google.com/file/d/0B8gFW78WkjMSeVFBVnA1NFBmX3c/view?usp=sharing
#dc_jqmegamenu_widget-2-item ul li a {
background-position-y: top !important;
}
Check the backgrounds positions. This rule fix it
#dc_jqmegamenu_widget-2-item ul li a {
background-position-y: top !important;
height: 1em;
}
#dc_jqmegamenu_widget-2-item ul li form {
margin-top: auto;
height: 1em;
}
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; }
I would really like to stop the menu items jumping around on this site as the parent item expands to fit its child.
I can get it looking how I want when I add this CSS, forcing the menu items to have fixed widths:
/*Menu item 1*/
#menu-item-117 .sub-menu {right: -125px;}
/*Menu item 2*/
#menu-item-73 {width:45px;}
#menu-item-73 .sub-menu {width:980px!important;right: -10px;}
/*Menu item 3*/
#menu-item-122 {width:65px;}
#menu-item-122 .sub-menu{width:980px!important;right: 165px;}
However, this is clearly not ideal, as the menu needs to be dynamic...
Is there a way to achieve what I want via CSS? I hope so!
I am using the Superfish menu that comes with Theme Hybrid for Wordpress.
Thanks in advance for any help you can offer!
I get your point .. let's see again.
This build uses position: relative/absolute; instead of float: right/left; and it has one flaw mentioned below.
However I haven't test this in old browsers including IE (tested in Chrome & Firefox), but I hope this may provide you some idea to implement it. :)
#primary-menu .menu /* new rule */ {
position: relative;
height: 50px; /* The flaw is you have to fix the menu's height here */
}
#primary-menu ul {
position: absolute;
right: 0;
top: 0;
}
#primary-menu li {
float: left;
list-style: none outside none;
margin-left: 10px;
position: relative;
}
.sub-menu {
background: none repeat scroll 0 0 #244563;
clear: both;
display: none;
font-size: 0.8em;
overflow: visible;
padding: 5px 0 !important;
position: relative;
right: 0;
text-align: right;
top: 30px !important;
width: 700px !important;
}
.sub-menu li {
display: inline !important;
float: none !important;
padding: 10px 0 !important;
width: auto !important;
}