MiguelFerrao Posted February 28, 2021 Share Posted February 28, 2021 (edited) Site URL: https://www.musaparadisiaca.net/about Hi there. I am aware that this is a common issue, even though, I couldn't find any CSS solution to it concerning version 7.0. I know the solution for version 7.1 but, that version comes with different issues concerning customisation. Could someone please help me with a CSS solution for hiding specific navigation items with the purpose of creating a bilingual website? It is absurd that this option is no longer available on styles from scratch. Thanks a lot for your time! Edited February 28, 2021 by MiguelFerrao Link to comment
tuanphan Posted March 2, 2021 Share Posted March 2, 2021 Hi. To hide an item, use this CSS /* hide knows item */ div.nav-item [href="/places"] { display: none; } MiguelFerrao 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MiguelFerrao Posted March 2, 2021 Author Share Posted March 2, 2021 Thanks a lot for your help! Link to comment
MiguelFerrao Posted March 2, 2021 Author Share Posted March 2, 2021 This solution is perfect for hiding items permanently. Although, in my case, I am searching for an option to hide specific items on specific pages. I am building the navigation bar with all the links for the two different languages, as so, I would need to hide the links on language A when opening pages on language B, as so on. Could you please help with that too? Link to comment
MiguelFerrao Posted March 2, 2021 Author Share Posted March 2, 2021 I have used the code you kindly provided to make some test. And it worked, the nav items are now only shown when they are needed. My only remaining issue is the blank space the hidden items seem to occupy in the nav bar, pushing all the visible items to the left. This creates justification problems to the nav bar as a whole. Do you have any idea on how to solve this? Thanks a lot in advance. Link to comment
MiguelFerrao Posted March 2, 2021 Author Share Posted March 2, 2021 (edited) Dear @tuanphan, It seems, after all, that all the hidden items are always there occupying blank space and forcing the visible items to the left or right, depending on the order of the main navigation items' insertion. Edited March 2, 2021 by MiguelFerrao Link to comment
tuanphan Posted March 6, 2021 Share Posted March 6, 2021 On 3/2/2021 at 7:18 PM, MiguelFerrao said: Dear @tuanphan, It seems, after all, that all the hidden items are always there occupying blank space and forcing the visible items to the left or right, depending on the order of the main navigation items' insertion. Hi. Do you still need help on this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MiguelFerrao Posted March 7, 2021 Author Share Posted March 7, 2021 (edited) Hi @tuanphan! I couldn't find any solution to 7.0 version, unfortunately. Edited March 7, 2021 by MiguelFerrao Wrong answer. Link to comment
tuanphan Posted March 8, 2021 Share Posted March 8, 2021 22 hours ago, MiguelFerrao said: Hi @tuanphan! I couldn't find any solution to 7.0 version, unfortunately. You can target :nth-child with when item, use this new code nav.site-navigation>div:nth-child(4) { display: none !important; } nav.mobile-primary-nav-links>div:nth-child(4) { display: none; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment