I have just posted my question before for the same topic which is Here. I got a correct answer from Mr. Simon, thanks to him. I found one more issue, the width of the drop down menu is very small and its not coming in one line please Click Here to know the detail. I want the text to come in one line...
Also, he said to use the below code to remove the last splitter in the menu filed. I dont know where to put this. Can you assist me.. Thanks..
$('.green ul.mega-menu li:last-child a').css('background','none');
Try adding this to your CSS:
.mega-menu a { white-space: nowrap; }
For second issue (width of nav items):
Remove the fixed width (and I would change text-align: center to text-align: left) on the following CSS declaration:
.green ul.mega-menu li a {
background: url("images/bg_green.png") repeat-x scroll 100% 0 transparent;
color: #000000;
display: block;
float: left;
padding: 12px 38px 12px 25px;
text-align: center; /* <--- Change this to text-align: left; */
text-decoration: none;
text-shadow: 1px 1px 1px #FFFFFF;
width: 102px; /* <--- Remove this */
}
Related
Although sometimes a pixel here or there must be forgiven and forgotten.
But in this example this simple menu's need to be rendered pixel-perfectly!
That is to say, the gaps between the menu items must be exactly equal.
In my example all menu separators looks ugly and fuzzy and disoriented as some items melt together.
While others are too far apart. Its a mess. After a nights sleeping,
I have come to the conclusion that this is one of those scenario's where the life's motto
of accepting whatever comes at you cannot be accepted and a designer must take a stand.
Whether its a dashed or solid line, the problem occurs in each and every whay I approach it.
setting margins to -1px and adding a border of 1px does not fix this.
Both examples are made from the newest version of Chrome and Firefox in 2022.
Is there a way we can separate the items with an equal, exact pixelated/aliased sharp line, without the vague anti-aliased fuzzy line of seemingly random thickness to happen?
You are allowed to rewrite it entirely or use flexbox or any other elegant CSS solution!
..............................
nav ul{
list-style: none;
margin: 0;
padding: 0;
}
nav {
top: 0px;
left: 0px;
position: absolute;
height: auto;
display: inline-block;
font-style: italic;
font-size: 1.25em;
padding: 0px 0 0 0;
}
nav li {
background-color: blue;
writing-mode: vertical-rl;
transform: scale(-1);
line-height: 1em;
border-top: 1px dashed white;
}
nav li a {
display:block;
text-decoration: none;
color: #fff;
padding: 2em;
}
<nav>
<ul>
<li>Bureau</li>
<li>Projecten</li>
<li>Diensten</li>
<li>Ontwerpen</li>
<li>Concepten</li>
<li>Kunsten</li>
</ul>
</nav>
Borders can be fiddly when you start applying transforms to the element they are applied to, so remove the transform:scale(-1) from the containing <li> elements and transform the <a> instead:
nav li {
background-color: blue;
writing-mode: vertical-rl;
line-height: 1em;
border-top: 1px dashed white;
}
nav li a {
display:block;
text-decoration: none;
color: #fff;
padding: 2em;
transform:rotate(180deg); <- other transforms are available :)
}
Snippet here based on your code: https://codepen.io/29b6/pen/KKQZywz
I am using bulma for a css framework and i ran into an interesting learning experience. I am trying to align the nav buttons to the bottom of the red field. However, as you can see they have shifted out of alignment. I have tried to apply an inline css style to them, however that does not correct the issue.
Can anyone point me in the right directory, it would be greatly appreciated.
https://codepen.io/robot43298/pen/WNGENNL
.navbar-end {
.button{
color: white;
font-size: 18px;
border: 2px dashed white;
background-color: red;
}
.dropdown-trigger{
margin-top: 15%;
display: inline;
vertical-align: bottom;
}
& li{
font-size: 16px;
}
}
Try this,
Remove this margin
.navbar-end .dropdown-trigger {
margin-top: 15%; /* Remove this margin */
display: inline;
vertical-align: bottom;
}
and add some padding here as per your need
.dropdown{
padding-top: 20px;
}
This should do the trick;
I tried looking your code in console, I added one line and removed one.
and it seems to work as per you expectation.
Do let me know if this what you wanted.
I want it to be like this:
Currently, it is like this:
So, as shown most of the background is highlighted in white but there is a small left and right section which is purple.
The code I have so far which correspond to the menu items is:
.collapsible-menu ul
li:hover:not(:last-child) {
background-color:white;
width:100%;
color: #4C27B3;
text-decoration: none;
outline:none;
}
It is probably a quick fix but I need a second pair of eyes to pinpoint the issue. Many thanks in advance.
All code can be seen here:
https://codepen.io/JoyFulCoding/pen/EzXowL
in Css
.menu-content{
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-weight: bold;
padding: 0 0 0 50px;
/* add this margin left & right to make hover white full screen*/
margin-left: -79px;
margin-right: -30px;
}
in Css
.collapsible-menu {
background-color: #4C27B3;
border: none;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
Remove Padding from this class in code
The problem is whenever I change the padding of the buttons to fit the links height, I got a small white space in the hover effect for the links. You can see that in the fiddle below:
.navbar a {
float: left;
font-size: 16px;
color: #b58b23;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown .drpbtn {
font-size: 16px;
border: none;
outline: none;
color: #b58b23;
padding: 14px 16px;
background-color: inherit;
}
https://jsfiddle.net/m8yb8645/
These two padding's don't match, but they should in order to solve your problem:
.navbar a {
padding: 14px 16px;
}
.dropdown .drpbtn {
padding: 17px 16px; /* needs to match with the above, so 14px 16px */
}
Updated fiddle
The problem is inside your link CSS. Actually when you are giving padding your padding equally affect 14px from top and bottom but due to that, only the bottom is not covered so I suggest you to add the following CSS code to your navbar anchor tag.
padding-bottom: 19px;
into .navbar a {...}
This might solve your problem but it is not a good habit Instead you use the bootstrap that is more helpful.
I have a horizontal nav that looks as follows:
I'm trying to remove the bottom border for the actively selected li item, but for some reason the usual ways of doing this don't seem to be working. I've tried applying margin-bottom: -1px; and it didn't work.
Here's a JSFiddle with my CSS code:
http://jsfiddle.net/s5ynF/8/
Appreciate any help on this.
Simple.
update these CSS selectors to this:
ul.nav {
list-style: none;
margin: 0;
padding: 0;
padding-left: 25px;
border-bottom: 1px solid #E8E8E8;
height:25px;
}
#nav .home {
background-color: #FFF;
border: 1px solid #E8E8E8;
border-bottom: 1px solid #FFF;
margin-bottom: -1px;
}
I removed the overflow:hidden; that's why it wasn't working. I then applied a fixed height to the .nav
You will need to use a different clear fix method as the overflow: hidden is what is stopping it from working.
I added an explicit height and removed overflow: hidden and it worked.