I'm using wordpress twentytwelve child theme.
the nav bar has a border-top that I would like to get rid of.
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 0px solid #ededed;
display: inline-block !important;
text-align: left;
width: 100%;
}
however when I add it to my child theme with 0px for the border,
the navigation refuses to flick over to the menu toggle when I scale down the window.
This is just weird and I'm at a loss to the reason why.
any help would be absolutely amazing.
Related
When I use the following CSS, I go from the output of the image at the top to the image at the bottom:
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
The purpose is to have a larger hover area for the mega menu, otherwise the mega menu disappears when the mouse is between the ''Assessment'' menu and the mega menu box. However, when my padding is at 30px, all the menu items shift higher up. What would I need to add to keep this large box (the edges will be white - I put black so it is easier to see now) without affecting the rest of the menu?
edit1: the menu is generated from the pearl theme for wordpress. The .menu-border is an added css class for the ''assessment'' menu.
If we could get a working snippet it would be easier to help.
Also, there are two menus in your capture. I guess that adding the code it's the second one. Looks you're missing vertical-align property
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
vertical-align: middle;
}
I'm unsure what you're exactly looking for but have a crack at this CSS that's using the inline-block property -
.menu-border {
display: inline-block;
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
Further reading on CSS inline-block
https://www.w3schools.com/css/css_inline-block.asp
If someone ever face that problem, the solution was to replace my code with this
body .stm-header .stm-navigation__default > ul > li > a {
padding: 30px 30px;
}
i making a navigation with wordpress. i want to make a navigation like this
http://www.technikonus.lt/en (vertical navigation in the left). there are parent and submenu items...
I do not know what I have a problem. With css or should I change something in wordpress menu walker.
That's what I get now: Its ok with parent items
But with sub-items i have a trouble because dont know how to align li items when appears sub-menu items:
<li>
<ul><li></li></ul>
</li>
so this is how looks like my menu now http://jsfiddle.net/Yu8fg/
DEMO
CSS
.menu li {
background: url('img/li_bullet.png') 16px no-repeat;
list-style: none;
border-bottom: 2px solid #e6e6e6;
width: 190px;
display: block;
}
.menu > li{
padding-left: 32px;
}
as css inherits by children from parent so padding-left: 32px; was applying to submneu li as well so by using ">" selector we have limited it apllication only to .menu li and wont apply to submenu li
I am using bootstrap and I am changing the color of the link on hover.
The problem is when I hover there is a slight flicker which causes the navbar height to change. Any leads on how to fix it.
Here is the demo
Link has border-bottom: 4px solid white; when you hover over it.
Give your normal li the same border.
.navbar .nav>li {
float: left;
border-bottom: 4px solid;
}
I'm designing a navigation menu for a website.
The menu must have rounded corners, I've done this using 'border-radius'.
I've set the width as 800px as that's the rough width the menu needs to be, if I remove the width or put width: auto the width goes to 100%.
There is a gap before the first button and after the last button in my navigation menu and what I need to get rid of this gap without losing the curved edges.
How can I make the first and last buttons maintain rounded outside corners and remove the gap between each side of the navigation.
CSS:
/* CSS MENU */
#menu {
/* DISPLAY SETTINGS */
text-align: center;
height: 40px;
width: 800px;
margin: 0;
padding: 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
/* APPEARANCE SETTINGS */
border-top: 2px solid #356AA0;
border-left: 2px solid #356AA0;
border-bottom: 2px solid #204061;
border-right: 2px solid #204061;
background: #628ddb;
/* FONT SETTINGS */
color: #15387a;
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
}
/* LIST SETTINGS */
#menu li {
display: inline-block;
}
/* HYPERLINK SETTINGS */
#menu li a {
text-decoration: none;
display: block;
padding: 0 15px;
line-height: 40px;
}
/* HOVER AND ACTIVE BUTTON SETTINGS */
#menu li a:hover, #menu li.active a {
color: #15387a; background: #3D7BBB; border-bottom: 2px solid #204061
}
HTML
<ul id="menu">
<li class="active end">Home</li>
<li>Our Services</li>
<li>Testimonials</li>
<li>Get A Quote</li>
<li>Drive For Us</li>
<li>Terms & Conditions</li>
<li class="end">Contact Us</li>
</ul>
So there are several things that need to happen in order to maintain your design:
1.) The UL tag needs to have display: table
2.) Like what #Netsurfer You'll need to set the LI to have display: table-cell so that the list items flush to the edges
3.) Now that UL has rounded corners, any child elements with squared corners will stick out. You can either:
a.) Resolve this by applying overflow: hidden to both the UL and LI or
b.) Apply the rounded corners to the LI and A tags.
4.) Your :hover & active state applies a bottom border -- the table-cell will cause this to look strange. It might be better to remove it altogether.
You can check out the code here: http://jsfiddle.net/vuAVV/
Remove text-align: center; from #menu.
You might also want to include padding-left: 10px; to make sure when the first link is highlighted it does not overlap with the rounded corner of the menu.
See this working jsFiddle.
Change the display setting for the LIs to display: table-cell.
By doing so you are also not "trapped" by the white-space issues when using display: inline-block.
See jsFiddle
PS: Forgot the rounded corners ..., now also included. ;-)
I am working with Drupal 7, and I made a custom drop down menu using css. Everything is displaying fine, but the drop down does not change position when the screen moves.
Here are some screenshots:
Here is the css:
**/*---------VISITORS SUBMENU---------*/
#block-menu-menu-visitors .content ul.menu{
position: relative;
margin-left: 0 auto;
margin-right: 0 auto;
}**
#block-menu-menu-visitors .content ul.menu li{
padding: 2px 15px 2px 15px;
list-style-type: none;
display: inline-block;
background-color: #ffff90;
}
#block-menu-menu-visitors .content ul.menu li:hover{
padding: 2px 15px 2px 15px;
display: inline-block;
background-color: #ffffaa;
}
Any ideas on how to get the position to be the same relative to the screen size?
So I figured out the problem. In my php, the div that I had placed my submenu in was floating by itself. My solution was to wrap it in the same div that the main menu was, and it worked out perfectly. There was never a problem with writing of the css or html, just a location issue. Consider this issue solved.