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!
Related
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:
I am currently trying to get my footer menu to center and appear all on one line. Currently, it is on 2 lines for some reason.
The website is: http://museiam.ca/
I am trying to achieve this (image): http://museiam.ca/wp-content/uploads/LookBookPage_1.jpg
The theme I am using allows the option of 3 OR 4 widgets in the footer area. I currently have it set to 3. The menu itself is in one widget including the links Customer Care - Newsletter, where the Follow Us link is in another HTML text widget with all the social icons. I am trying to put everything on one line and centered like in the picture with equal padding.
I have tried to increase the widget of the menu width but to no success. Here is the CSS I tried:
.widget widget_nav_menu .menu-footer-1-container {
width: 800px !important;
}
I am open to any input or solution to achieve my desired look. I appreciate and thank you for all looking.
Look for this .container_12 .grid_4 and change the width to 100%
.container_12 .grid_4 {
width: 100%;
}
Also, you have another widget there which has an empty text post, remove that.
You are using 3 'grid_4' divs to fill 'container_12' parent div. What you need to do (from my perspective) is the following:
Use a single 'grid_12' div to wrap the menu, instead of dividing it into 3 'grid_4'.
Then, give menu UL 'align: center'
For centering li children do 'display: inline-block' on them (I think you already did this one).
I'm using jqueryui's menu feature, and the submenu overlaps other elements on the page. The problem is when I select the menu item which brings up the submenu, the submenu is displayed beneath the other elements.
I'm not sure how menu is to be configured, or if I have to override some jqueryui css elements, in order to get this to display as expected (over top of the other page elements).
The problem can be seen with the Tools menu at http://jsbin.com/hexuw/2/
Sorry the code is more complex than is necessary to show the minimal problem, but the menu call can be seen just a few lines down in the javascript file.
Thinking that this is a stacking problem I tried setting the navigation element z-index to a high number using the .ontop class, but that didn't help.
Add the line z-index:9999; under the selector .ui-menu
The CSS code will be
/* put navigation to the left (jquery ui) */
.ui-menu {
width: 10%;
float: left;
z-index:9999;
}
JS Bin Live demo
I got the the drop down menu to work using text instead of an image and I got the drop down menu to actually go up (added bottom: 100%; to nav li ul) but I still can't seem to get the CSS formatting right.
Below is a link to my test page as well as the style sheet...
Need help making my footer navigation be in one line instead of having the new drop down Services menu on it's own line.
Need to simply center the drop down / up sub menu items when you hover over the main Services link.
http://wsgdev.com/ceiltex/indextest.html
http://wsgdev.com/ceiltex/styles.css
Thanks so much in advance for any help!
Remove the width: 100% and add display: inline-block to the nav element (style.css line 27)
read more about inline and block elements
I'm developing a child theme for the Buddypress default theme. I have customised the look of the navigation bar quite a lot, and now I am trying to get drop-down menus working. They work fine in the default theme. In the default theme a class is added to list items in the nav bar that are hovered over, .sfhover, and this div class has the CSS 'position:relative;z-index:1000'. The #container div that the drop-down menus should stay on top of has the CSS 'position:relative' and no z-index set. Presumably this means that the z-index is the default of 0. Finally the #header div which includes the nav bar has the CSS 'position:relative;z-index:1000'.
I have checked that in my child theme all of the CSS is the same for these three divs, and indeed it is, and yet the drop-down menu does not show above the #container div, but is cut off where the #container div starts.
You can see what I mean if you visit this page, and hover over the 'links' items in the nav bar. You will need the following credentials to see the page as it is password protected:
Username: guest
Password: stackoverflow
Perhaps someone can spot why this isn't working as expected with my child theme?
Thanks,
Nick
there is nothing wrong with your z-index. You have the #header set to overflow: hidden which means that nothing will flow out of it your nav sub menu included. Remove this and you will be good.
problem is in <div id="header"> block which has property overflow: hidden and it hides everything that out of it dimension. You have to remove it and if you use it for clear floats, try another method: boilerplate clearfix or just add div with clear:both after <div id="header">