- This topic has 9 replies, 2 voices, and was last updated 7 years, 2 months ago by
.
Hi fantastic team,
i hope every single one of you to have found their valentine… now let me get back to my issue…. Navigation bar (again).
When I go to the official page of the Jevelin, when I reduce the width of the browser window enough, the navigation bar gets to the three bars (one on top of the other) immediately. On my site, it first loses the alignment, showing an awful 2 lines navigation bar and when I significantly reduce the width ever further, then and only then the navigation bars transforms to the three bars (one on top of the other, the jargon is not my strongest suit).
Why is this happening, and what can we do?
Here is the site http://www.airbnb-helper.gr
In the past I had opened a thread about the navigation bar, that although there is a huge gap between the logo on the left, and the first menu on the right, it loses the alignment pre-maturely. It was suggested to add the following CSS code
“@media (min-width: 1023px) {
.sh-nav-container ul {
display: flex;
}
}”Nevertheless, I removed it, and nothing happened, so I guess it was not functional as I didnt notice any difference.
Thank you for your support.
G
Hi there,
Please try following CSS snippet:
.sh-nav li.menu-item { padding: 0px 13px!important; }Let us know if it works. 🙂
Best regards,
Shufflehound team
hmmm… nah… didnt do anything. same thing. I feel that I have raised the bar of challenge here 🙂
G
This CSS snippet should fix this issue, because it reduces padding between navigation links. Can you add it so we can check why it is not working? 🙂
It has been added 🙂
G
Thank you.
It seems that this issue is fixed for us.
Can you add a screenshot if this issue isn’t fixed for you?
Hi fantastic team…
I now have all the necessary pictures to explain what the problem is.
I use Safari on this occasion, but it works the same with Chrome and Opera.
I have used a ruler to properly explain what the problem is and I took print screens.
Ideally, what I need is when someone reduces the width of the browser the navigation bar to approaches the logo on the left as close as possible, and when they immediately reduce it even further the 3 lines to appear (instead of losing the alignment. Refer to picture on the right hand side).
You are great 🙂
G
Solution for this topic
Thank you for you explanation. 🙂
As you can see it in our screenshot our chrome browser shows it just fine, but it could be, because we are using Windows PC.
Can you please try to change previous CSS snippet to this bellow:
.sh-nav li.menu-item { padding: 0px 10px!important; }Its working!!!!! On Chrome and Opera… fuck Safari! no-one is using it after all (or maybe i need to wait to clear the cache)
Fantastic!
G
Nice to hear that. 🙂
