I'm a WordPress newbie so please be gentle.
Using Avanta theme on WordPress version 4.3.1.
This is the site:
http://goo.gl/YoDI9a
Trying to center the top navigation menu bar.
Used the following custom CSS code but didn't make a difference:
.fusion-main-menu > ul {
text-align: center !important;
float: none !important;
}
.fusion-main-menu > ul > li > a, .fusion-main-menu > ul > li {
float: none !important;
text-align: center !important;
display: inline-block !important;
}
.fusion-main-menu > ul ul {
text-align: left !important;
}
Any help appreciated.
On line 5518 of http://www.acornoak.co.uk/wp-content/themes/Avada/style.css?ver=3.8.6.1 get rid of the "float: right;" line under the .fusion-main-menu selector.
The problem is outside, in your style.css file change your .fusion-main-menu to this:
.fusion-main-menu {
position: relative;
z-index: 200;
}
Related
I do not want the navigation menu to be left-aligned but centered with space over the entire width. How do I do that? I use "Blogger".
Thank you for your answers!
Best regards,
Tini
Go to Theme > Customize > Advanced > Add CSS
Add this css code :
#PageList1 ul {
text-align: center;
}
#PageList1 ul li {
float: none;
display: inline-block;
margin-left: -4px;
}
.tabs-inner .widget li a {
border: 0;
}
Then Press Apply to Blog
My problem is that I've got a div at the top of my site that has a dropdown menu with a float to the left, the thing is that under that div where I want to have a header whenever I hover over the menu the header floats to the left as well.
I tried to do a clear div after the top div then on css use clear:both; but it didn't really help
Here's the JSfiddle:
http://jsfiddle.net/Safushi/XRNP5/
ul {
font-size: 16px;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #464646;
white-space: nowrap;
}
ul li a:hover {
background: #565656;
}
is some of the code for the menu (had to paste some code to be able to paste JSfiddle link).
It will be fixed by adding a
position: absolute;
to the ul that contains the submenu.
The child ul element needs to be absolutely positioned if you don't want it to effect the other elements.
Example Here
#top li > ul {
position:absolute;
width:100%;
}
And as Adrift mentions, you may also want to give the ul a width of 100%.
You got the layer of HTML file right,but the property "position" wrong.
Demo
Once a tag's settled position:absolute; ,it will only be positioned referring to its containing block.So you need to set #menu{postion:relative;} to let its parent-tag be the containing block.In fact,now the submenu is totally deleted from the normal flow,so it won't affect the styles of other tags.
Moreover,I highly recommend you to resist to use descendant selectors,which not only let your browser slower,and your code maintenance much more complex as well.
I was working on this site and added the header menu with drop downs. The third menu item WINDOWS SUPPORT sub menus are aligned to the left while others are aligned to to the center of the dropdown.I have edited the css to
.sub-menu li a {
text-align: center;
}
but the dropdown area is aligned to the right compared to others.Please help me in making it align correct.Thanks!!
i checked your site. just add these two classes in your css. it will resolve the problem.
#mainmenu .menu-item-292 ul
{
left:-15px;
}
#mainmenu .menu-item-292 li
{
padding-left:15px !important;
}
watch your css file and remove this 2 lines
#mainmenu .menu-item-291 a{margin-right:15px;}
#mainmenu .menu-item-292 a{margin-left:-16px;}
If you want to make more space use padding and border-box:box-sizing
You have
#mainmenu .menu-item-292 a {
margin-left: -16px;
}
It's pulling over both the "Windows Support" anchor, and all anchors below it.
Try this
Add margin-left: 0; css for given anchor tags into your style.css file I guess at line no. 383
#header #mainmenu ul.children li a, #header #mainmenu .sub-menu li a {
color: #FFFFFF;
font-family: 'menu-font' !important;
font-size: 13px !important;
padding: 5px 20px;
text-align: left;
text-transform: uppercase;
margin-left: 0;
}
I hope this solves your problem!
I'm trying to make my footer menu open upwards, but the menu is getting cut off at the top of the footer. I've tried setting overflow-y:visible;, but that doesn't help.
Here's the site: http://new.freshsourdoughexpress.com/contact/
And the code I'm using:
#colophon {
padding-top: 40px;
overflow-y: visible;
}
#colophon #navbar ul li:hover ul {
bottom:100%;
top:auto;
}
#colophon #navbar ul ul li:hover ul {
bottom:0;
}
(The top padding is temporary, just to see what's happening.)
I've been following the 3rd how-to in this guide: http://premium.wpmudev.org/blog/move-wordpress-theme-menus/
How do I get the menu to extend out of the footer?
Within your CSS, you'll need to add a couple of attributes to the id below.
#colophon {
padding-top: 40px;
overflow: visible;
display: inline-block;
width: 100%;
}
I've tried it out using the CSS editor within Chrome and everything seems to work.
I've created a custom theme based on a template and for some reason the CSS drop down menu that appears on every other page when you hover of 'Services' doesn't seem to work on the wordpress page.
I copied and pasted the code I created into the Header.php file along with the same styles.
Anyone have any ideas?
The website can be fond here...
http://www.globalpurchasingsolutions.co.uk/blog/
It should work as it does here...
http://www.globalpurchasingsolutions.co.uk/testimonials.html
Any help on this matter would be very much appreciated.
Here's what the CSS Code Is Like
nav {
margin-top:20px;
text-align:left;
float:right;
margin-right:10px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background:#FFF;
color:#336699;
list-style: none;
position: relative;
display: inline-table;
width:auto;
}
nav ul:after {
content: "";
clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
border-bottom:solid 2px #336699;
}
nav ul li a {
display: block;
padding: 15px 20px 15px 20px;
color: #2B66A2;
font-size:19px;
text-decoration: none;
}
I messed around with Firebug and wasn't able to solve this.
Have you tried using 'master.css' directly in the WordPress theme instead of 'header.css' and 'style.css'?
There are various combinations of things going on, and using different stylesheets will certainly complicate things now and moving forward.
I just tried removing header.css and style.css and replacing it with master.css with Firebug... there were some other issues going on, but the dropdowns started working.