Since I changed logo to SVG, menu does not work. Maybe transparency of logo covers menu?
When I do: display: none for logo, menu works well.
Could please somebody help me?
Website: http://www.1.moneymagnet.store/
Your logo holder is all over the whole thing (width: 100%;). It's getting this style from an inline style-sheet. That's why your menu is not working.
Just give it a fixed width and everything will work as expected:
.logo-holder {
width: 110px;
}
Look out for specificity on your selector though.
Related
I have problem with my submenu in Flatsome Wordpress. I try my best to edit width of this submenu to have same width with main menu (range from logo to red button) but no results. Anyone can help me, please. Thank you so much :((
Here is my website
#alien
Here is main menu I want to edit width of submenu
Main menu Layout
Flatsome is notorious for having too many selectors in their css, making it hard to override. Here's what I'm using, and it works:
/*Sets width of dropdown menus*/
#header .nav-dropdown {
width: 95vw;
}
You'll want to enter whatever width you desire, of course. Also, if you have other menus that you don't want this to apply to (for example, a top bar menu item that has a submenu), you can add a class to the top-level menu items you want this snippet to apply to in the WP menu editor and add that class to the css above.
Example: add class 'wide-dropdown' to each top-level menu item (not submenu items underneath it), then the css would be...
#header .wide-dropdown .nav-dropdown {
width: 95vw;
}
Hopefully that helps!
I am using layers framework for my wordpress based website. Checkout here medshopi.I have used left logo style for the menubar. In the menubar the logo and the menu items are overlapping. Same is the case with responsive layout. I dont understand which part of css is overlapping the logo and menu items.Your help is extremely appreciated and thanks in advance.
Remove
position: absolute;
from line number 157 on style.css
Since your .logo div is an absolutely positioned element, the sibling .nav becomes blind to it.
You have to give the nav enough space, via padding or margin to get around the issue. This assumes that you want the menu to start right after the menu. Example
.header-site nav {
margin-left: 200px;
}
Output 1
You could also remove the position absolute and accompanying style applied on your logo which seems to be the right thing to do.
Output 2:
Only on chrome, the left sidebar menu disappears on hover. This does not happen at the top of the page but can be seen when scrolled midway of the page.
IMAGE SHOWING THE ISSUE --> https://symu.co/rdrbyt
Code:
.uk-notouch .tm-sidebar-togglebar .tm-sidebar:before {
content: "";
position: fixed;
}
.uk-notouch .tm-sidebar-togglebar .uk-open-menu:before {
content: "";
position: fixed;
width: 210px;
height: 100%;
}
DEMO SITE: http://healthsphere.starazure.com/ --> Please scroll down midway to the page and hover the left menubar to see the issue.
Thanks for your help
I figured out myself and was tired of people positing unrelated replies to make a fiddle out of a Joomla php based page with fontawesome icons, bootstrap, jquery and more and even better my css gets created by less. It was really a complicated 3 level menu system and people just said fiddle it without even looking at the example and screenshot. It could be possible to create a fiddle but would take a whole day for me ( I am not an expert, if so I would not ask the question here in the first place)
If you dont want to answer, that is perfectly fine and understandable but dont just say - This is no good without a fiddle when a demo and screenshot has been posted. Just move on - Be nice - everyone is fighting a hard battle here.
For anyone who is trying to make a 3 level menu, here is the answer.
The idea is to remove overflow property because that in conjunction with fixed position breaks in Chrome. Its a well known bug and has been reported. With overflow hidden removed, the next steps is to push the menu list items to the left. This makes the menu disappear but then used margin to push the icons only to the right. In short, move menu items to left so they are hidden and move icon only to the right. Remove overflow declarations in css as it breaks chrome.
.tm-sidebar .uk-navbar-nav li {margin-left: -175px;}
.tm-sidebar .uk-navbar-nav li a i {margin-left: 175px;}
My website is Verdacci.com
My question is, when viewing the website on desktop (not responsive version), I would like to center the menu vertically. So the menu is always in the center of the screen. Can somebody help me to do this? I don't want to change any code except the CSS.
Also note that if the screen size height reduces to less than 600px (i think its 600), the menu is replaced with a mini menu. I would like this functionality to remain.
I have tried quite a few things already with no luck. My CSS skill is not very high so please try to explain in as simple terms as possible? Thank you!!
To center something in CSS you can do this:
.yourclass {
margin-left: auto;
margin-right: auto;
}
Add this class to your menu and it should work.
For some reason I cannot get the drop down to appear on this site: http://a.dev200.com/cflow/
It works fine on mobile screen size, just not on desktop screen size.
Can anyone help me out please?
Thanks
you have an "overflow: hidden" in "megaMenu" div.
Try to fix it or add this css code:
#megaMenu.megaFullWidth { overflow: visible; }