Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

MiguelFerrao

Member
  • Posts

    24
  • Joined

  • Last visited

Everything posted by MiguelFerrao

  1. Site URL: https://banjo-recorder-36fe.squarespace.com Hi there. I would like to prevent audio blocks from playing on a new window while on mobile, version 7.1. Is there any way to do it across the website on Custom CSS or Code Injection? Kind regards, Miguel
  2. Site URL: https://banjo-recorder-36fe.squarespace.com Hi there! I am trying to fix an odd problem with my website. I am creating a button for language selection that translates every page to a second language, separately. This button is to be included in the navigation (header) and it has to link to specific pages, corresponding to the page you are. I've used the EDIT SITE HEADER>ELEMENTS>BUTTON option to allow buttons on navigation and a script by @creedon to add the button I want. Then I used CUSTOM CSS to hide the first button created by EDIT SITE HEADER>ELEMENTS>BUTTON and kept the one I've created using the script by @creedon visible. I've done this and it is working but as the navigation links are load first and when the button is loaded the navigation moves to fit it in. This is the main problem. The other problem is that some pages overlap the navigation links with the page content on loading. I would also like to correct this. Is there anyone available to help? Website password: musa Thanks a lot! Miguel 1785939272_ScreenRecording2021-04-12at18_43_12.mov
  3. Dear @tuanphan, I have tested your code but, unfortunately, it doesn't solve the "sliding" problem concerning navigation items while loading pages. This is driving me crazy... Can anyone help me understanding this?
  4. I am adding two videos from both website's versions, 7.0 and 7.1, to illustrate the "navigation items sliding issue". I will be really happy with any help! 7.0.mov 7.1.mov
  5. Hi @tuanphan and thank you for your answer. I am hiding navigation items using code injection because those hidden elements vary accordingly to the language of each page. I am building a bilingual website. If I move the code in Code Injection into Design > Custom CSS it will change website as a whole and it will not allow to hide half of the elements in one language and show these same elements in the other language. Let me explain: To accomplish a bilingual 7.1. website using navigation this way and to have a button to change language on each individual page (the button seems the same but it links to the translated page where you are, so it needs to use specific code each time) I had to use the "add a button to navigation" official option and to add a script to allow and addition of multiple buttons to navigation. But, unfortunately, I couldn't find any solution for having this "official" button to link to different pages depending on the page you are, as so, I had to put something on the "button text" label and to hide this button with Custom CSS. Then, with the script, I could add as many buttons as I wanted with as many links and description I wanted. This all fine, the only is that, sometimes, the hidden button appears for a brief moment and changes the set-up of the navigation. Any way, this issue of having the navigation sliding to the left and then to the right, for a second, when loading pages, was already occuring on my 7.0 version of this website (www.musaparadisiaca.net), and I couldn't find any solution to this problem either. Any ideas? Thanks a lot.
  6. Sorry @tuanphan, had to change it to musa. No capitals.
  7. Site URL: https://banjo-recorder-36fe.squarespace.com/knows Dear all, I am experiencing an issue with my 7.1 website concerning the navigation items. When the page loads, the items quickly slide to the left just before returning to their desired position. I suspect that this is related with the amount of CSS custom code it has to read before opening the page. The password for the website is Musa. Any help would be really appreciated! All best, Miguel
  8. Dear @LaurenZA, with pleasure! Please check it out here: https://banjo-recorder-36fe.squarespace.com/homept pass: musa
  9. Hello @creedon. I have done it almost perfectly on 7.1. Here is the URL: https://banjo-recorder-36fe.squarespace.com/homept pass: Musa It would be really nice to replicate this design on 7.0. In fact, the only complaint I already had with 7.0 was the odd behaviour of the navigation menu. Each time you load a page, the menu jumps to the left, for one second, just to return to the right after.
  10. Hi @creedon. The website is public. www.musaparadisiaca.net Thanks for your help!
  11. Hi @creedon, thanks a lot for the code. It is working perfectly. The only problem is that I want to add a specific button for each page of my website, linking to second language page versions of each page. Is there any possibility to use code injection on each page for this purpose?
  12. Hi @creedon, how are you? Would there be a version of this code (to add buttons to header) for the York template on 7.0? Any help would be really incredible. Thanks a lot.
  13. Hi @tuanphan! I couldn't find any solution to 7.0 version, unfortunately.
  14. Hi @tuanphan, thank a lot for answering. Meanwhile I have discovered the way to deal with the problem. I've just deselected the option for a fixed header and added the following code do Custom CSS: .header#header {position: fixed!important;} It solved the problem.
  15. It is solved. You can check it out here: https://banjo-recorder-36fe.squarespace.com/homeen To create a single or multiple buttons with specific links for an individual page, you will need to: Hide the automatically create button (edit header>elements>button) on Custom CSS Add script to Code Injection (Settings>Advanced>Code Injection>Header) Add multiple buttons to navigation using Code Injection on each page Hide all the buttons created that you do not want to show on a specific page 1) Here is the Custom CSS I used: .btn:first-of-type {display: none!important; color:#E6E6E6!important; background-color:#000000!important;} .btn:nth-child(2) {margin-left: 35px!important} .btn:hover { color:#000000!important; background-color:#ffffff!important;} 2) Code injection for header (Settings>Advanced>Code Injection>Header) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 3) Code Injection for multiple navigation buttons, thanks to @tuanphan: <script> $( ( ) => { /* add buttons to header SS Version : 7.1 */ let buttonsNewData = [ { buttonText : 'EN', url : 'https://banjo-recorder-36fe.squarespace.com/who' } ] // do not change anything below, there be the borg here $( '.header-actions-action--cta, .header-menu-cta' ).each ( function ( ) { let $this = $( this ); $.each ( buttonsNewData, function ( index, buttonNewData ) { let $buttonNew = $( '.btn:first', $this ) .clone ( ) .attr ( 'href', buttonNewData.url ) .text ( buttonNewData.buttonText ) .appendTo ( $this ); } ); } ); } ); </script> 4) Code injection on page to hide specific elements (in these case navigation buttons) <style> #header .header-nav-item:nth-child(6) {display:none} #header .header-nav-item:nth-child(7) {display:none} #header .header-nav-item:nth-child(8) {display:none} #header .header-nav-item:nth-child(9) {display:none} #header .header-nav-item:nth-child(10) {display:none} #header .header-nav-item:nth-child(11) {display:none} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(6) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(7) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(8) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(9) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(10) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(11) {display:none}} </style> Hope this helps.
  16. Site URL: https://banjo-recorder-36fe.squarespace.com/quem Hi there! My still in development website is presenting a strange behaviour. Whenever I reach the top of the page and stop, the header adjusts a tiny bit its height in direction to the bottom (expands vertically). I can understand how this behaviour is occurring and it is oddly annoying. Can anyone please help? Screen Recording 2021-03-05 at 16.23.38.mov
  17. Dear @creedon, this code is amazing and works perfectly to create multiple buttons, thanks a lot! However, would it be possible to use a similar method to create a single button without using the "edit header > elements > button" path? I am trying to have a single button linking to different pages on each page of the website, making it a language selector for each of those individual pages. Thanks for your help.
  18. Site URL: https://www.musaparadisiaca.net Hi there. I would like to confirm if it is possible to transform a navigation link into a button using CSS. I am trying to use it as a language selector, as so, I would also like to understand if this button may link to different pages depending on the page it is. Thanks a lot for the help!
  19. Site URL: https://banjo-recorder-36fe.squarespace.com/who Hi there. I would like to use the same CSS button on navigation linking to multiple pages, one at a time, depending on what page you are. Is it possible to do it? My final goal would be to have a language CSS edited selector button with different behaviours (linking to different pages). Thanks a lot for you help!
  20. 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.
  21. 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.
  22. 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?
  23. 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!
×
×
  • Create New...