I am trying to replicate something as shown in the above image. Live URL
Could not succeed. some Pseudo or Knack is needed?
Are you trying to make this :
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding:none;
For the padding, you don’t even have to write it out. If you don’t write out the padding, it would still be the same, which is the default 0px.
I was able to fix it by changing the HTML structure to→
<div class="navlist"><div class="navspan">HOME</div></div>
<div class="navlist"><div class="navspan">WHATS THAT</div></div>
<div class="navlist"><div class="navspan">TOPICS</div></div>
<div class="navlist"><div class="navspan">PRICING</div></div>
<div class="navlist"><div class="navspan">TICKETS</div></div>
From →
<div class="navlist">HOME</div>
<div class="navlist">WHATS THAT</div>
<div class="navlist">TOPICS</div>
<div class="navlist">PRICING</div>
<div class="navlist">TICKETS</div>
Yet could not align text in center + could not distribute available width of nav with certain uniformity.
1 Like
Slightly off-topic, you shouldn’t use ALLCAPS for your menu items, some screen readers read out each letter as though they are initials. Use CSS to transform to capitals.
text-transform: uppercase;
4 Likes
@Gandalf good point, but I have seen some menu items in all caps too.
1 Like
Sadly, just because you see something on a website, that doesn’t make it good practice. 
There is an awful lot of bad code about, and far too many inaccessible websites.
4 Likes
This was not off-topic, but some remarkable takeaway of the day. Thanks!
2 Likes
Shouldn’t you be applying the hover effect to section a?
1 Like
I have done it but that doesnt gives anticipated result.
Did you mean something like this?
I think I must have misunderstood because thats more or less how it comes out of the box 
2 Likes
You did it in master stroke with immense simplicity.
1 Like
Hi there, You have given the solution in a very crisp way, but i was in the middle of trying something with JQuery. Like this →
$(".navlist").hover(function() {
$(".navspan a").css("color","white");
});
I think there are propagation and delegation issue because after unhovering it the initial state is not stored + It is impacting all →
What will be the course correction to eliminate undesired result.
Why use jQuery for something that can be done in CSS. In fact, all you’re doing is using jQuery to add CSS rules. It doesn’t make much sense to me.
4 Likes
Every language, be it CSS, jQuery, JS…etc has its own set of rules. My feeling is, that you should only use one if another doesn’t suffice your needs. Else if it does, then why make things harder for yourself? When there’s an easier route, take it.
You add a style on hover but you don’t remove anything when you are not hovering. You need the hover in and hover out handler method. You also need to find the element inside the element that triggered the hover event and you can do that with $(this) and .find(). You were getting the whole row of anchors in your example.
$(".navlist").hover(
function () {//hover in
$(this).find("a").css("color", "white");
},
function () {// hover out
$(this).find("a").css("color", "inherit");
}
);
Of course you shouldn’t really change styles with JS but rather add and remove classes instead and avoid specificity issues later down the line.
However you don’t need any of that rubbish as you can do it all in css anyway.
.navlist:hover a{color:#fff;}
3 Likes
These are not commercial projects. Practicing, and learning. I also wanted to do it through JQuery just for knowing one more additional method.
Whatever that additional method is, I’m sure there’s a CSS way to that too
Not everything can be catered by css else there wouldn’t have JS.
1 Like
You need to remember that if you use JavaScript to add your styles, it will not work for any visitor who has JS disabled.
True, but where it can, is it not better to use the right tool for the job?
3 Likes
Hi, @TechnoBear,
Thank you for your insight.
No technology is difficult if you practice a lot. I had got some Knack on JS/Jquery in the Month of August, but then I left learning, and since the technology has yet not become part of my system and was not wired deeply within me so I forget most of the things.
Learning also becomes difficult when you are in self and self tutor mode. You work in a company they give you live assignments and you are forced to learn.
Self-learning has its own comfort zone, sometimes causal attitude.
I still believe that most of the learning is in small bites and through Hit and trial. So now I am trying to explore as many methods as I can especially to give some curve to JS/Jquery learning.
1 Like