Get Main Navigation to Float

  • Unknown's avatar
    faunageo · Member ·

    Hi!

    I wonder if there is a way for the main navigation to float at the top of the page when you scroll down. Similar to one page themes.

    If that is not possible, how can we have a sort of floating arrow pointing upwards on the right of the pages when the person scrolls down, so it can be used to reach the main navigation faster.

    Both cases will help people reach the main navigation quicker without the need to scroll up while reading the site.

    asiaespecialista.com
    and
    strasetsglobal.com

    Many thanks
    Ralph

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    otpidusprime · Member ·

    Hello @rprwg,
    I suppose there’s no way to do that because both(fixing[floating] the menu bar on scroll and adding a arrow pointing upwards when scrolled) requires JavaScript to detect the scroll and scroll amount so that they are not always visible.

    But there’s this trick you, where we do not have to use any JavaScript. We can do it just by using CSS.

    Here’s how it can be done:
    1. FIX NAVIGATION AT THE TOP OF THE PAGE WHEN SCROLLED:
    As i mentioned before there is no way to fix only the menu-bar at the top, as it requires JavaScript to detect the scroll amount.
    So… Instead of fixing the menu-bar you can fix the entire header so that the menu bar as well as the search bar is easily accessible all the time.
    i. Fix the header:
    /*fixed header*/
    #masthead {
    position: fixed;
    background: #272f2f; /*use gradient colors instead of this solid color to match the background perfectly.*/
    left: 0;
    right: 0;
    z-index: 99;
    }
    ii. Add padding to the page content so that the fixed header is visible: 

    #page {
    padding-top: 150px;
}

    2. ARROW TO SCROLL UP:
    I have a question with this, are you using a static front page or the default front page layout of the theme?

    If you are using a static front page, then in the pages editor add a custom element by on the HTML tab link this:
    <a href="#" class="scroll_top">▲</a>
    Clicking this link will allow the visitors to scroll to top.
    CSS code to style this link: 

    .scroll_top {
    content: "▲";
    position: fixed;
    bottom: 50px;
    /* left: 0; */
    font-size: 25px;
    color: rgba(0, 0, 0, 0.44);
    background: #9ab3b2;
    padding: 3px 16px;
    cursor: pointer;
    border-radius: 1000px;
}

    Now this link will always be visible, because as i mentioned before JavaScript is required to be able to detect the scroll amount and then display the arrow. However we can use this CSS trick: 

    #masthead:hover ~ .scroll_top {
    display: none;
}

    This will cause the arrow to be visible only when the user’s mouse/pointer is on the main content page and not the header.

    I know it’s a lot to take in, apologies for that.
    Let us know if this helps. Thanks 🙂

  • Unknown's avatar
    otpidusprime · Member ·

    CORRECTION: 

    .scroll_top {
    position: fixed;
    bottom: 50px;
    font-size: 25px;
    color: rgba(0, 0, 0, 0.44);
    background: #9ab3b2;
    padding: 3px 16px;
    cursor: pointer;
    border-radius: 1000px;
}

    use this code instead of the above.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi Ralph, first the caveat: This works with most browsers and versions, but in the case of Internet Explorer only for version 10 and later, and 10 can be a bit flakey. The other thing you will notice with this is that I’ve moved the menu up above the logo and search box. We cannot “fix” the menu after the header image scrolls up without Javascript, and we cannot use that here at WordPress.com. Give this a try and see what you think. 

    #masthead {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}
#navigation {
	-ms-flex-order: 0;
	-webkit-order: 1;
	order: 1;
	position: fixed;
	z-index: 10;
}
#header {
	-ms-flex-order: 2;
	-webkit-order: 2;
	order: 2;
	padding-top: 100px
}
#masthead {
	position: relative;
}
@media screen and (min-width: 768px) {
	#navigation {
		max-width: 720px;
	}
}
@media screen and (min-width: 992px) {
	#navigation {
		max-width: 940px;
	}
}
@media screen and (min-width: 1200px) {
	#navigation {
		max-width: 1170px;
	}
}
  • Unknown's avatar
    faunageo · Member ·

    wow! it was a lesson! many thanks

    Let’s see
    1) All is fine, got it and it’s working perfectly

    2) It’s working, on clicking the arrow, page rises to the top. The only thing is that the arrow remains visible and to the left of the page. Is it that way, or I am missing something?
    https://asiaespecialista.com/viajes/

    And I add a three… :)
    3) Have you noticed the theme scrolls down too much. There is a lot of space below the WP logo at the bottom. Can this space be shortened?

    Your work is awesome!
    Many thanks
    Ralph

  • Unknown's avatar
    faunageo · Member ·

    @otpidusprime

    @thesacredpath

    Thank you to both! both worked and they are both good options to consider for the “floating” main navigation. Great.

    @otpidusprime
    2) It’s working, on clicking the arrow, page rises to the top. The only thing is that the arrow remains visible and to the left of the page. Is it that way, or I am missing something?
    https://asiaespecialista.com/viajes/

    And I add a three… :)
    3) Have you noticed the theme scrolls down too much. There is a lot of space below the WP logo at the bottom. Can this space be shortened?

    Thank you engineers!
    Ralph

  • Unknown's avatar
    otpidusprime · Member ·

    @rprwg

    @otpidusprime
    2) It’s working, on clicking the arrow, page rises to the top. The only thing is that the arrow remains visible and to the left of the page. Is it that way, or I am missing something?

    By default it will be on the left, but you can move it to the right if you want. To do that just use the right property, like this: 

    .scroll_top {
    position: fixed;
    bottom: 50px;
    right: 130px;  /*adjust the value if you want*/
    font-size: 25px;
    color: rgba(0,0,0,0.44);
    background: #9ab3b2;
    padding: 3px 16px;
    cursor: pointer;
    border-radius: 1000px;
}

     

    3) Have you noticed the theme scrolls down too much. There is a lot of space below the WP logo at the bottom. Can this space be shortened?

    It is because your footer has a lot of bottom padding. You can remove that by using this: 

    .footer {
    margin-bottom: 0px;
}
  • Unknown's avatar
    otpidusprime · Member ·

    @thesacredpath i really liked the idea of using the flexbox to change the order of the elements.

    FAVORITED! 😁

  • Unknown's avatar
    faunageo · Member ·

    Thank youuuu!

    Awesome work!
    My best!
    Ralph ;)

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • Unknown's avatar
    thesacredpath · Member ·

    @otpidusprime, it’s one of my favorite CSS toys of late, when it is doable on a theme. Some themes are structured in such a way that flexbox can get quite messy, but in this case it worked out well.

  • The topic ‘Get Main Navigation to Float’ is closed to new replies.