- This topic has 9 replies, 2 voices, and was last updated 7 years, 2 months ago by
.
Hi fantastic team of Javelin,
I have noticed that after I installed the beta theme the navigation bar has some alignment issues.
In particular the spacing between the logo (left) and the menu bar (www.airbnb-helper.gr) although is sufficient with a big gap in between, when I try to reduce the width of my browser by a small fraction the alignment is lost, despite the fact that there is so much space.
Because im awful explaining things, please check attachment.
Thank you for everything you have done for me so far.
Cheers,
G
Hi G,
Thanks for posting here.
I have tested it on your shared site by resizing the browser width and it is working fine for me as shown in the attached screenshot.
Which browser are you using?
Could you please try tasting it on different browser?
Best regards,
Shufflehound teamHi team,
Hmm this is very very strange but I take your word for granted.
OS: MacOS, and I used it with the following browsers: Opera, Chrome and Safari and I had the same issue with all three of them.
Regards,
G
Solution for this topic
I could confirm it using firefox browser and it is happening because when we reduce the browser width the nav menu items don’t have enough space so it moves to bottom as shown in the attached screenshot.
Hi team,
glad that you spot it too, however, there is a lot of space to compensate the reduction of the width. the screenshot I sent you, is a few nanoseconds apart and it is when right after it loses the alignment…. so there is space to compensate. This was not happening in the previous version…. if it can’t be fixed somehow, I guess I will have to live with it. I am open to suggestions though.
Regards,
G
Solution for this topic
You can try resolving it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
@media (min-width: 1023px) { .sh-nav-container ul { display: flex; } }Hi fantastic team,
I inserted the CSS code, but nothing happening. the huge gap is still there, and when I try to minimise by a fraction, it loses alignment.
G
I visited your site and found the provided custom CSS code is not working because you are using wrong comment style as following in the custom CSS code.
//navigation bar gap issueThe CSS doesn’t allow this type of comment so instead use the comment as displayed below and if still the provided CSS code doesn’t work for you then try adding it above all the custom CSS code in the top.
/* navigation bar gap issue */Hi there,
I have placed it on top but still doesn’t seem to work. I also placed the comments in the format you said (I dont think it played a role, to be honest…but of course you are the expert). What bugs me, is that this misalignment occurred after the using the beta version. Before, obviously, when the logo was close to the headers on the navigation bar it was, of course, changing the alignment. But now, although the huge gap, it loses the alignment pretty quickly.
Regards,
G
I have checked it on Firefox browser and the issue is resolved for me on your site.
Please try clearing your browser cache.
We are also troubleshooting it to fix in the next version of theme and will do it soon.
