Hi I have a few issues with my navigation bar on my website www.thehungryeurasian.com
1) I've added icons onto my navigation bar, and managed to position those on the right with the CSS below. I positioned the home icon on the left by giving it an ID, then inserting the CSS on the bottom line. But this has meant the tabs next to the home icon have been moved down. How do I fix it so it is within the bar?
.navleft {float:left; } .navright {float:right;} .tabs-inner .widget ul {margin-right: 0px; margin-left: 0px;}
.tabs-inner .widget ul, .tabs-inner .widget li a, .tabs-inner .section:first-child ul { background: none; }
#navigationbar {width: 1060px; height: 40px; background-color: #326609; background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; position: fixed; top: 0px; margin-left: 0px; z-index: 999; }
.navright li a { padding: 0px !important; }
#homeiconButton { padding-top: 5px !important; padding-bottom: 0px !important; padding-right: 10px !important; padding-left:10px !important; }
2) After adding the icons and the CSS above, my navigation bar lost it's background colour and went clear. I had to add
background-color: #326609;
to override this. Is there something blocking my CSS for this that I need to remove?
3) last question!
I have white dividers in between my tabs. However, there seems to be padding in between them. How would I remove this? Also, is it possible to just have the dividers on the left side of my navigation bar and not on the right side?
Thank you in advance! I know it's a lot of questions.
Answer 1 - Add style "vertical-align : top" to all the navigation li items (you can exclude for home icon).
Answer 2 - Question is not very much clear to me. But I can see a background color in your navigation bar.
Answer 3 - Remove the style - float: none; from "#cssnav li" selector styles. You may be giving both border-left and right to the li as white. Remove border-left and just give border-right.
Hope this helps.
Related
I am trying to use this chat snippet in the angular project. The point is that I can't include jquery parts so I need just its HTML and CSS parts. Here is the original one:
https://bootsnipp.com/snippets/exR5v
I copied it on Codepen and there were bullets on the left side of each user in chat list.
I also added list-style-type:none;
But it just removed bullet points and the extra margin was left there instead of bullets.
Here is the link of my example: https://codepen.io/artyombaykov/pen/pxGyjY
I made changes in this part for removing bullet points:
#frame #sidepanel #contacts ul li.contact {
position: relative;
padding: 10px 0 15px 0;
font-size: 0.9em;
cursor: pointer;
list-style-type:none;
}
How can I remove that left side extra margin which was appeared because of bullet points?
How to fix this
Overriding the style of the ul element inside #contacts to 0 or 0px.
#contacts ul {
padding: 0px;
}
Adding the above code to your stylesheets will fix the issue.
Why did this happen
This extra padding was because of this below property added in the stylesheets common to all ul, menu, dir elements.
padding-inline-start: 40px;
Add this css and it will fix your problem.
#frame #sidepanel #contacts ul {
padding-left: 0px;
}
Add to ul list-style-type:none
#frame #sidepanel #contacts ul {
list-style: none;
padding: 0;
}
I made a simple navigation menu using a ul, but when you hover over it, the background color will not change the entire background. I think it may have to do with my padding elements. How do I fix this?
Here is a Fiddle of my code: https://jsfiddle.net/b8js8zkq/
I have looked at How do I make the hover background color fill the height of the link? and did not find a good answer there, so please don't mark this as a duplicate of that.
The problem with your code is, you have margin and padding on both <h3> and <li>. So remove them and add them as padding to the <a> tag. And you are done!
The padding and margin of each 15px constitute 30px of total padding to <a>. That's what I have done below:
.header li {
border-bottom: 1px solid #888;
font-size: 20px;
padding: 0;
}
ul h3 {
margin: 0;
padding: 0
}
.header a {
display: block;
padding: 30px;
}
Fiddle: https://jsfiddle.net/19r4a4ft/
I'd recommend changing your css from this
.header a:hover{
background-color: #f3e5d8;
}
to this
.header li:hover{
background-color: #f3e5d8;
}
This will make it so any list item within your header class will change its background colour when hovered.
https://jsfiddle.net/b8js8zkq/1/
Fixed fiddle.
You remove the padding on both <h3> and <li>, and add that same padding to the <a>-tag.
jsfiddle update
Old
.header a:hover {
background-color: #f3e5d8;
}
New
.header li:hover {
background-color: #f3e5d8;
}
You want to change the color of the li element rather than just the a tag
I have a blog over at wordpress.com and there is a problem with the dropdown box on my main navigation.
When the mouse is hovering over, it appears, but when you move out of it to click a link its goes.
Heres the blog: https://readingartlab.wordpress.com/
Dropdown menu for 'Workshops'. This problem occurs when I added margin-top: 11%; so that it would align with the rule beneath it.
Any help? Thanks in advance.
EDIT:
This is the CSS that has been changed:
.main-navigation ul ul {
padding: 8px 0;
margin-top: 11%;
}
So, the issue here is that there is a set amount of space devoted to your .menu-item -- when you hover over it, that triggers the submenu, but in order to move into the submenu, your mouse is actually leaving the space that triggers the hover effect. In Chrome Developer tools, when you click on the list item for Workshops in the HTML window, you see exactly how much space is around the list item:
Ideally, you'll reconfigure the CSS for that whole navigation area so there's more padding around the list item.
You can also try to trigger the focus class that the drop-down caret uses via jQuery, but that runs into some of the same problems and you end up either having to leave the submenu open until you click elsewhere or set it to remove on mouseleave of a larger parent element, like the header, which is pretty wonky.
You can't hover the margin of an element. Use padding or border instead to fill the gap between the parent en child element.
Have a look at this minimalistic demo on jsfiddle.
ul.menu > li {
display:inline-block;
padding:5px;
}
ul.menu > li > ul {
display:none;
border-top:5px solid $navigation-background-color;
margin:5px -5px -5px;
}
ul.menu > li:hover > ul {
display:block;
}
ul.menu > li > ul > li {
display:block;
padding:5px;
}
Add a little padding to the bottom of your parent menu item
.menu-item-has-children > a {padding-bottom: 10px; margin-bottom: -10px; }
If you target just those with a child item - .menu-item-has-children - it won't affect the other menu items. The negative margin-bottom offsets the expansion of the menu area that occurs with the adding of the padding-bottom. Using the > selector says, "Target the <a> elements that are a direct descendent just one level deep of the things with class menu-item-has-children." (So your extra padding won't affect the spacing / padding on your submenu.)
This is a great article about Child and Sibling Selectors in CSS - CSS Tricks: Child and Sibling Selectors
I hope these codes will solve the issue.
.site-header {
border: 0;
padding-bottom: 0;
}
.search-navigation {
border-top: 0;
margin-bottom: 0;
}
#media screen and (min-width: 960px) {
.search-navigation {
margin-top: 30px;
padding-top: 0;
border-top: 1px solid #cecece;
border-bottom: 1px solid #cecece;
}
}
.main-navigation li {
padding: 15px 0;
border: 0 !important;
}
#media screen and (min-width: 960px) {
.main-navigation .menu-item-has-children {
padding-right: 0;
}
}
.main-navigation .menu-item-has-children > a {
padding-right: 38.5px;
}
.main-navigation a {
display: block;
padding: 0 15px;
border-right: 1px solid #e0e0e0;
}
.main-navigation>div>ul>li:last-child a {
border: 0;
}
It was happening because there was a gap between submenu and < li > which you are using for triggering hover.visual
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!