I've been searching and trying out some code to make my dropdown menu same size for each link, like nelly.se, but I can't figure that out. I was tried this code:
.nav-dropdown{position:fixed; left:0; right:0;}
but can't make it work at all.
The website I am working on is: http://94.247.169.169/~welloteket/
position: fixed will really fix it in relation to the window, which means it can't be scrolled at all - that won't work.
Usually for dropdowns you use position: absolute and adjust the left and top settings as needed. There are at least two important additional things:
1.) it has to be a direct child element of the element in relation to which you want it to fix. In the example you linked to that would be the black navigation bar, probably a ul element in there.
2.) That parent container has to have position: relative.
The kind of "mega dropdown" (i.e. equal size and position for each dropdown regardless of its related main menu entry) is trickier than a regular dropdown (i.e. one than opens directly under / next to its main menu entry). You propably need Javascript for this.
Apart from those general guidelines we can only help you if you post detailed code - HTML, CSS and JS, if there is any.
Related
I have a searchbar in my navbar, and when you type something inside it, another div below it appears with results according to your typing,
I want to put this div above all of the others, because for now the div with the results goes under the website content...
I tried to put a "z-index: 999" on it, but nothing changes,
To test it
- Go on the films page of my website : https://ofilms.herokuapp.com/films
- Click on the "search" icon in the navbar
- Type "Avengers"
- See the results div going under the other div
Add position: absolute to your CSS.
As per my understanding, z-index will only work with position as absolute or fixed. I have never tried with position as relative. We can experiment that as well. :-)
Not sure if this works, but you could try giving the ! important parameter too:
z-index: 99 !important;
I'm using Astra template with Elementor plugin.
I've set up my navbar to be fixed - to scroll alongside the webpage, but now my items are appearing under it. And i'm not talking about the z-index issue, but the first thing that comes after navbar - breadcrumbs + title are both under navbar.
.main-header-bar-wrap{
position:fixed;
top:0;
width:100%;
}
I solved the issue using --
padding-top:100px;
But i don't really think that's the best practice.
Is there any better solution?
Thank you!
There's not really one foolproof way of doing this unfortunately. Fixed elements are taken completely out of the flow of the page and how it renders so don't take up any space. https://developer.mozilla.org/en-US/docs/web/css/position#fixed
The way you've done it is one option, another is to change the padding to match the height on resizing the window (to make sure the height is always correct).
e.g. something like:
$(window).resize(function () {
$(".main").css("padding-top",$(".main-header-bar-wrap").outerHeight());
})
The other option is to create a hidden duplicate of the header, with position: relative and visibility: hidden, which will take up the required space but not be visible. Just make sure to add the aria-hidden="true" property so people with screen readers don't end up with a duplicate menu.
You could do this with js as follows:
$( ".main-header-bar-wrap" ).after(
$(".main-header-bar-wrap").clone().addClass("spacer").attr("aria-hidden","true")
);
This will duplicate the header and add the class spacer to the second version so you can style it separately with the visibility and position properties, along with the aria-hidden attribute.
Guys
I am having hard time tweaking a CSS part of the menu.
I have a website here at http://aaron.wordpresstiger.com where the last title "CONTACT" of the menu comes up with a line ahead and doesn't fits the menu. though i was successful in getting the "HOME" first menu item correctly fitting the menu but not the last one.
Can you please tell me what CSS i should add to fix this MENU problem. Also, please have a look i need the last item of the menu to be showing as same css as the first one (HOME).
I need the menu's items to look similar to the one here:
http://officialfacebooklikes.com/index.html (have a look at the last "CONTACT" which fits the menu correctly).
I look forward to hearing back for HELP :)
Regards
Muzammil Rafiq
in your css you will want to add two styles
#access li {
width: 25%;
}
#access li:last-of-type, li#menu-item-31{
border-right: none !important;
width:24% !important;
}
the first will make each menu element 1 quarter of the width... the second removes the right border on the last element and re-sizes it to fit properly on one line of the navigation bar.
the !important tags may not be necessary but they will ensure this works on the first go.
Well, if you want to create a horizontal menu you should float the list items. But as I can see from your example website you want the list items to be even in width, so you need to put those list item into containers, determing the width for each list container and float those. Also text-align center your a tags.
Good Luck!
I'm work on this website and am trying to add drop down functionality. The theme is David Airey and I'm using the drop down functionality from twentyten. Pasted the CSS from twenty ten into the menu.css in David Airey, but when you hover over "Broadcast" (the only one utilizing drop down), the box appears in the top left. Checked everything thrice, but can't find where it's screwing up, an extra set of eyes could probably help.
Thanks!
Add position: relative to the <li> that contains the submenu.
You need to add position: relative to .nav li.
This will make the submenu be absolutely positioned relative to the li, instead of the window.
A diagram is here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I have menu that is implemented with html and css.
On mouseover of main menu, I have to show all submenus in one place.
Here is an example click here jsfiddle
For this, the submenus alignement is not proper.
According to the example, Test 5 has to come under Test 2 but, it's showing blank space.
How can I align this properly?
Note:: The Submenu items will be dynamic, they may grow or shrink.
Unfortunately, it is not possible with your current markup: if Test5 had to go below Test2, then how would you automatically tell it not to go below Test1? What should the rule be? There's no obvious answer to your question: if you need elements of different size to layout in a space efficient manner, without too much blank space, etc, you could write some kind of layout manager with jQuery that will structure and re-position your menus according to their content.
The problem is your submenus are floating left and Test 5 is getting hung up on Test 3 because it is longer than Test 4.
You can test this by adding a CSS rule to set the submenus to have the same height.
ul .sub.sub10 ul{
height:180px;
}
Link to updated jFiddle