Fixed Header Bar for Social Media

  • ninegrandstudent

    (@ninegrandstudent)


    9 years, 1 month ago

    Hi,

    I’m trying to create a fixed header bar with social media icons – so it stays at the top when scrolling.

    Something a little like here, though I know this is a blogger site.

    My site is ninegrandstudent, and I am running the Ciggy theme bought from Etsy.

    I’m not overly experience with CSS/HTML but can have a good go with reading tips and hints so would prefer to try and do this myself.

    I’ve looked at plugins but I don’t think they offer the customised state I want – I want to use the icons in the sidebar for example.

    If anyone can give me an idea of how to go about this, that would be great!

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • CypressWebs

    (@jmeyer2485)

    9 years, 1 month ago

    In your Child Theme or CSS Editor <— Important!

    Try this code:

    .main-navigation {
    border-top: 5px solid #F4E6EB;
    border-bottom: 5px solid #F4E6EB;
    position: fixed;
    width: 70%;
    top: 0px;
    background: none repeat scroll 0% 0% rgba(255, 245, 245, 0.8);
    z-index: 2;
}

    UPDATE: Sorry I misread your question, my code should only effect the nav bar not adding the social icons.

    Thread Starter ninegrandstudent

    (@ninegrandstudent)

    9 years, 1 month ago

    With regards to your update – it also removes everything within my current nav bar – so it just shows a fixed line (I’ve removed the code for now).

    However thanks for your answer as it has given me some ideas. If I manage to do anything I’ll come back and post my solution.

    Open to other suggestions too!

    CypressWebs

    (@jmeyer2485)

    9 years, 1 month ago

    Sorry, It worked out in element inspector.

    It moved all the navigation to the top of the page.

    Might of had different effect on your live site.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Fixed Header Bar for Social Media’ is closed to new replies.

Tags