I am started to use the wordpress theme "Pinnacle Theme" and optimized it for my needs. But now i got a problem i cant solve and hoped someone can help here.
I am trying to center the Large Menu (more Columns, then normal dropdown) to the parent item.
On my Website "Wilde-NaTouren" the Menu Item "Wandern + Trekking" is the Problem.
The normal ".kt-lgmenu" is normally full-width, but i try to give it a fixed width with following code
.kad-primary-nav .sf-menu>.kt-lgmenu>ul {
width: 520px!important;
}
now i have to center the .kt-lgmenu>ul to .sf-menu>.kt-lgmenu but i dont know how.
Here 2 Images to view how it looks right now, and what i want to have (sorry cant post Images).
Actual Situation ->
Result
Thanks for your Help
You have a relative li container already, which is the first step. The next step is to horizontally center the hidden dropdown using transformX:
.sf-dropdown-menu {
…
left: 50%;
transform: translateX(-50%);
}
I edited the site in the inspector and recorded it to show you how each rule is applied.
First, the left: 50% is applied. Then, we perform the negative translation. left refers to the parent element while transform refers to the target element (the actual hidden ul).
Related
I can't figure out why the list items on my website are displaying on top of my logo and the menu. Have a look yourself on the website or this image: a screenshot of the https://papojari.codeberg.page/art/ website Some time ago I had the same issue with headings. The headings were in the post-title class because of a template I use. When I removed that class, the problem was gone. My list items don't have a class like that though and I can't find any references to that class and what it does. You can obviously have a look at the CSS on the website but additionally the source code is also here: https://codeberg.org/papojari/pages.
Please tell me how to stop the list items from displaying on top of my logo and the menu.
#papojari, I have checked your site and I think that it's the problem of the z-index between and header and main section.
Here is the adding style for fixing it.
header {
position: relative;
z-index: 99;
}
main {
position: relative;
z-index: 0;
}
I hope it is helpful for you.
Use this code to fix directly
header {
position: relative;
z-index: 99;
}
Reason
You need z-index to control the vertical stacking order of elements. And z-index only affects elements that have a position value other than static (the default).
Take a look of this https://css-tricks.com/almanac/properties/z/z-index/
HTML fragments using links to pages using /#page-section to link to a specific section of a page is loading too low down the element for me.
For example I set up a <div id="engagment"> and then link to site.com/#engagement but instead of it linking to the top of the section like this:
what I want to happen
I get this: What actually happens
Is there anything I can do to fix this?
Thanks in advance. I'm new to html/web development.
That's because you have a fixed header which overlaps that section (which is actually positioned at the top of the window). So you need to create an offset.
A common way is to add an invisible pseudo element to the original target element of the link via CSS, like this:
#page-section::before {
display: block;
content: " ";
margin-top: -150px;
height: 150px;
visibility: hidden;
}
This will "extend" the element with that ID in a way that causes the anchor to be 150px above the main element, without any other visible changes. Adjust that value as you need it (i.e. to the height of your fixed header)
(A padding-top or margin-top would do something similar, but it would create an empty space in there, which you might not necessarily want)
I have a multi-level drop down menu at http://www.theseymourgroup-comm.net/new/. If you hover over Properties, you will see the first drop down menu come down that includes Commercial and Development. But when you hover over Commercial, you will see that the next level with Active and Sold goes way out to the right. I right clicked that panel and chose inspect element but could not determine what I needed to change in the css to make it move over to hug the first drop down menu. Any help would be appreciated. Thanks
The element with the "Active" and "Sold" entries is absolutely positioned, but it doesn't have settings for top or left / right.
If you add this rule
.nav li ul ul {
left: 150px;
}
you'll come closer to what you want. (I leave the finetuning of that value to yourself...)
I think javascript have some problems. Menu Dropdown use css only.
This is my example. It's very simple for newbie
Today I encountered a weird experience in my site LiveGreen
When I hover on the Menu Services, the dropdown goes underneath the image section below that. I tried every possible way like positioning and z-index ing and all kind, and googled a lot, am not bad with HTML and CSS still, it is testing me.
This theme is purchased, so cant post the code. you can check it from the website itself.
Please Help me.
Remove the z-index property on your .main class.
.main {
z-index: 1; /* this is causing your problems */
}
It's fairly difficult to pull off because there are so few unique classes to key off of. The root cause of the issue for you is that the element with a z-index that is higher than your menu applies that z-index higher up the DOM tree which makes it render on top. The best I could come up with is to apply the following, provided that the #aq-block-8801-5 block is always and will always be the nav menu container.
#aq-block-8801-5 {
position: relative;
z-index: 2;
}
I have this page: http://www.problemio.com which has a black bar on top which has search and a dropdown menu. That looks reasonably ok.
But then I have another page like this: http://www.problemio.com/category.php?category_id=1 which has those two elements, but for some reason, the search appears on the top left of the bar.
How can I make these elements appear as they do on the home page of problemio.com ?
Thanks!
You have it absolutely positioned over your search box. Fix the absolute positioning and you should be fine.
you don't have you main_styles.css on the interior page, which has this style in it:
#search {
float: right;
margin-top: 7px;
width: 14em;
}
In your page which displays the search box as you desire [problemio.com] the div has the css value 'float: right'. This is the value you need on the other page.
div#search {
float: right
}
I just answered this in the comments of your other question, posted 5 min ago.
Your problem is that the home page div with class nav takes values from main_index.css and the other page takes values from main.css.
There are some inconsistencies between the two which might lead to the problem. Firebug or devtools will help you debug these kind of problems.