1. Win some Crucial goodies in OCAU's Christmas Treasure Hunt!
    Dismiss Notice

navbar logo position

Discussion in 'Programming & Software Development' started by mixsetup, Nov 2, 2018.

  1. mixsetup

    mixsetup Member

    Joined:
    Dec 22, 2003
    Messages:
    2,729
    Location:
    Wynyard Tasmania
    Hi I'm trying to do a website with bootstrap 4.
    Was looking around to get some ideas and came accross this website
    https://www.theoldstate.com/

    I like the navbar how the logo switches from the center to the left on scroll.
    Would even like it if the logo changed to just text on the lefft.

    I have not been able to find any tutorials on how to do this.
    All I can do is get a plain navbar to shrink or change color.

    Does anyone know of a tutorial of how to do this?
     
  2. doug81

    doug81 Member

    Joined:
    Jul 18, 2005
    Messages:
    4,523
    Location:
    South Yarra, VIC
    Looks like it's just a hidden logo that appears on scroll with a new navbar

    upload_2018-11-20_18-9-27.png
     
  3. OP
    OP
    mixsetup

    mixsetup Member

    Joined:
    Dec 22, 2003
    Messages:
    2,729
    Location:
    Wynyard Tasmania
    thanks Iforgot to have a look at the source code too figure out how they did it.
     
  4. ni9ht_5ta1k3r

    ni9ht_5ta1k3r Member

    Joined:
    Feb 11, 2006
    Messages:
    32,792
    Location:
    地球・オーストラリア・シドニー
    I have a feeling it's 2 menus but they use jquery / javascript to switch based on how much you've scrolled down or up the page.
     
  5. OP
    OP
    mixsetup

    mixsetup Member

    Joined:
    Dec 22, 2003
    Messages:
    2,729
    Location:
    Wynyard Tasmania
    Looks great but two menus and jquery / javascript I think I will just do a basic navbar then.

    Thannk's
     
  6. ni9ht_5ta1k3r

    ni9ht_5ta1k3r Member

    Joined:
    Feb 11, 2006
    Messages:
    32,792
    Location:
    地球・オーストラリア・シドニー
    i'm sure there's a tutorial online somewhere.
     
  7. OP
    OP
    mixsetup

    mixsetup Member

    Joined:
    Dec 22, 2003
    Messages:
    2,729
    Location:
    Wynyard Tasmania
    Hope there is looks good how they have done it.
     
  8. theSeekerr

    theSeekerr Member

    Joined:
    Jan 19, 2010
    Messages:
    2,753
    Location:
    Prospect SA
    I have an abandoned prototype that uses jquery and CSS animations to achieve a similar effect at https://cjk.net.au/blogtest/

    JS here: https://cjk.net.au/blogtest/js/main.js
    CSS here: https://cjk.net.au/blogtest/css/main.css

    Sorry, neither are particularly readable, this was a prototype, not a teaching exercise.

    The basic idea is that you setup a function that fires when scrolling the page. That function checks whether we've scrolled past the original navbar, then adds or removes some CSS classes to resize the navbar and move the logo.

    Those classes make use of the CSS "Transition" property to animate the other property changes smoothly - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
     
    mixsetup likes this.
  9. OP
    OP
    mixsetup

    mixsetup Member

    Joined:
    Dec 22, 2003
    Messages:
    2,729
    Location:
    Wynyard Tasmania
    Thanks I'll check it out hopefully Friday as I am using my phone at the moment until I finish my new build.
    Thanks again
     

Share This Page