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

GregLassale

Member
  • Content Count

    25
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Site URL: http://gregorylassale.com Hello, Would someone be so kind to give me the CSS code for the scroll indicator included with the Sofia (Brine family) template? I have found CSS code for scroll indicators I've added to other pages of my site, but they arrow lines are shorter and thinner. I'd like to make them look identical to the one that comes with the template. I've inspected the element, but I don't exactly know what I'm looking at. Also, how I mark answers as accepted on the forum? Thanks!
  2. There's also text in a HTML code block I need to center.
  3. Site URL: http://gregorylassale.com Hello, I am using a blend of HMTL, CSS and JS to add scrolldown arrows on certain pages of my site. Here is the CSS: .scroll a { position: absolute; bottom: 20px; left: 46.5%; z-index: 2; display: inline-block; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); color: black; font : normal 400 20px/1 'montserrat', sans-serif; letter-spacing: .1em; text-decoration: none; transition: opacity .3s; } .scroll a:hover { opacity: .5; } #arrow a { padding-top: 70px; } #arrow a span { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 1px solid black; border-bottom: 1px solid black; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb05 1.5s infinite; animation: sdb05 1.5s infinite; box-sizing: border-box; } @-webkit-keyframes sdb05 { 0% { -webkit-transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } @keyframes sdb05 { 0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } I played with the left position a bit and it looks center on desktop, but it's a bit off to the right on mobile. Is there CSS property that allows to center elements across all platforms? I'd like it center relative to the rest of the content on the page. Thank you
  4. Site URL: http://gregorylassale.com Hi, I've been trying forever to figure out how to add animated / clickable scroll down arrows on my site. I found this page https://codepen.io/nxworld/pen/OyRrGy I like the arrow in section 5. Through trial and error, I managed to remove the code that didn't seem necessary for me and I tweaked the ID and class tag a bit. Would it work on my site? If so, do I put the HTML in a code block? Does the CSS go in Custom CSS and the javascript in the Code Injection header? The HTML <section id="arrow" class="scroll"> <a href="#services"><span></span>Scroll</a> </section> The CSS .scroll a { position: absolute; bottom: 20px; left: 50%; z-index: 2; display: inline-block; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); color: black; font : normal 400 20px/1 'montserrat', sans-serif; letter-spacing: .1em; text-decoration: none; transition: opacity .3s; } .scroll a:hover { opacity: .5; } #arrow a { padding-top: 70px; } #arrow a span { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 1px solid black; border-bottom: 1px solid black; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb05 1.5s infinite; animation: sdb05 1.5s infinite; box-sizing: border-box; } @-webkit-keyframes sdb05 { 0% { -webkit-transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } @keyframes sdb05 { 0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } The JS: <script> $(function() { $('a[href*=#]').on('click', function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear'); }); }); </script> Thanks in advance for any help.
  5. Thanks for the input. I contacted support, and after being asked to check my browser settings (all was fine there), I was told they would notify their engineering team, which I guess is code word for "probably a template bug", no fix for now. I removed all the images from the cover page and tried only using a solid background to see if the size of the image files was the problem, but the problem keeps happening. Honestly it jumps more than just a bit. It only happens for a split second but doesn't look very professional.
  6. Site URL: http://gregorylassale.com I found these scroll arrows and am wanting to add #5 to one of my pages. https://codepen.io/nxworld/pen/OyRrGy If I'm understanding the code right, on the template each arrow scrolls down the following section. <section id="section05" class="demo"> <h1>Scroll Down Button #5</h1> <a href="#section06"><span></span>Scroll</a> </section> On my site, I only want the arrow the scroll a bit further down the service page to reveal the rest of it (it's too tall to fit entirely on my screen). How would I need to change the code to control the anchor location on the same page? I'll also need to alter the CSS as I don't want the background pictures or gradients, but I can play with that and determine what bit I do or do not need. Thanks.
  7. Site URL: http://gregorylassale.com Hi, My site uses a scrolldown one page format. The most important sections have navlinks but I have 2 additional sections that I decided not to link to in the navbar in order to keep things streamlined. One section is for client testimonials. The other contains additional information (location, biz hours, cell phone, email address and social icons) that I don't consider vital. I'm a freelancer and not a brick-and-mortar biz, and the contact form already links to my email address. People never call me. I figured people would probably stumble upon them by scrolling down anyway, and I created a "more information" hyperlink at the bottom of the contact page for good measure. I was wondering if it is ever considered OK to have sections without navbar links and get pro devs' perspective on the subject. Thanks!
  8. I actually did after posting this. Hopefully they can help. I tried removing all custom CSS, site-wide and per-page code to see if that was something I added that created the issue, but that seemed to make no difference. Wondering if that's a template bug. Interestingly, if I try to change the same thing happens with every landing page layout template. Anyone using the Brine template with the "cover" landing page having or not having this issue?
  9. Site URL: http://gregorylassale.com Hello, I asked this question in the feedback forum but never got a final answer. I have a display bug on my landing page. All the elements except for the branding (headline, body, buttons and social icons) are first displayed high on the page, then jump to their correct locations. Does anyone have an idea on how to fix? I have similar problem on my index page. Upon loading, the top of page (where a picture banner + navbar should be) first shows a dark grey banner, then a aider black banner, then finally reveals the navbar and actual banner. I included pictures. any help would be greatly appreciated. Thank you!
  10. I'm bot sure if you still need help with this, but here is the method I used for my site (Brine template) FWIW. 1. Add a menu item to the English navbar with the name of your secondary language in that language. (e.g Svenska). Alternatively, you can use the ISO language code (SV) if you want to save some space. This will be your toggle to go from the English version to the Swedish version of your site. 2. Enable secondary navigation and translate every navbar item into Swedish save for the last one. Instead of "Svenska", use English (or EN). Set the secondary navigation to inherit primary navigation styles in Design > Site Styles. Use the same layout for the secondary navigation as for the primary one. Right now both navbars are displayed. We'll fix that in a bit **. 3. Create a second index page and name it "Svenska" (rename the other index page English). 4. Duplicate every page of your site, translate them into Swedish (or into English if you started with the Swedish version obv) and place them under the newly created "Svenska" index page. Rename all the pages in Swedish (you can add something like "_sv" for example). 5. In your English navbar, link the "Svenska" menu item to the Swedish index page. In your Swedish navbar, link the "English" menu item to the English index page. 6. ** We obviously only want the English navbar to be displayed on the English version, and the Swedish navbar on the Swedish version. To do that, go to your English Index Settings > Advanced and paste the following: <style> nav.Header-nav--secondary { display: none; } .Mobile-overlay-nav--secondary { display: none; } </style> Then, in your Swedish Index Settings > Advanced, paste the following: <style> nav.Header-nav--primary { display: none; } .Mobile-overlay-nav--primary { display: none; } </style> 7. Optional: You can create a landing page as your home page and add 2 buttons (English and Svenksa) linked to English and Swedish index pages. 8. You don't have to, but you can style your language navbar item to make it pop a bit. I made mine as a button and added a hover style in Design > Custom CSS. /*Make last nav item a button*/ a.Header-nav-item:last-of-type { border: 1px solid white; border-radius:5px; background: transparent; color: #fff!important; padding: 11px 9px!important; } /*Add hover style to last nav item button*/ a.Header-nav-item:last-of-type:hover { background: #f3f3f3; color: #333!important; } Note that the code above does not apply the spotlight effect to the language navbar item. I'm not sure why (I am not a programmer and stumbled upon the code on a webpage). It leaves the language menu button always highlighted. I'm not sure if best practices apply here and I'll let pros chime in, but I like that. If you do want spotlight to apply to the language navbar item as well, try this code instead: /*Make last nav item a button*/ .Header-nav-inner>a:last-child { border: 1px solid white; border-radius:5px; padding: 11px 9px !important; text-align: center; } /*Add hover style to last nav item button*/ .Header-nav-inner>a:last-child:hover color: black !important; background-color: white !important; } I think that's about it. You can take a look at what this all looks like on my site http://gregorylassale.com Please note that I am not a programmer by any stretch of the imagination. I knew nothing about the matter until I undertook the project to built my site, which I did through trial and error and pieces of codes gleaned on the internet or given to me by knowledgeable people. I'm not sure the above would work on your site's template (if not from the Brine family) but hope it still helps. Cheers
  11. Site URL: http://gregorylassale.com Hello again, Another question for you coding pros. I have the nav bar styled as Spotlight (all menu items change color except for the one hovered over). I'd like to do the same thing with the header branding i.e. all the nav bar items to change color when hovering over the branding with the same smooth transition. How can I achieve that ? Thanks in advance!
  12. I Think I figured it out: .Header-nav-inner>a:last-child:hover { color: black !important; background-color: white !important; }
×
×
  • Create New...