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
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).
This problem is only showing up in IE7. Other browsers and IE8 and above work fine.
I am using a sprite map with an ul for my side navigation. There is a fly-out submenu for one of the li elements which also uses a sprite map with an ul for downloading various PDFs.
If you look at the image that I've attached, the submenu is appearing in the correct location, but it's pushing down everything below it. (The word "Music" should appear directly below the word "Menu".)
I have tried various fixes using a display: inline; element and position: static; element, but my attempts have failed. Would really appreciate some help on this. The website address is: http://www.graysonmain.com/
You could use a fixed height, height: 58px and display: inline-block for li#nav_02.
Have you looked into overlays with CSS? I'm very new to this so I, personally, can't give you a concrete answer, but it might be possible to set the positioning of the submenus and toggle the visibility with an onClick() command.
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 have an HTML table where each row contains a Twitter Bootstrap style drop down list. When I click the button to show the list, the menu is not shown due to the overflow property of the div container. I have placed sample code that shows the issue I'm having at: http://jsfiddle.net/jpaolini/XgYKP/4/.
The goal is to get the drop down menu to appear on top of everything so it can be seen without have to scroll. Any help is greatly appreciated.
I removed the overflow: auto; from .widget-content and removed overflow: hidden from .dataTables_wrapper, and that seems to work.
http://jsfiddle.net/jackwanders/cnnsB/
you can try adding position:absolute in your .btn-group and the dropdown will go out of the table. The btn wont go inside the table anymore though