How to fade in header menu, center submenu and keep footer in the bottom

Hi @rubengt,

Firstly: Thank you so much for your kind words! I’m glad that some of the previous replies in this forum have been helpful to you. ??

when I attempt to get my site stats on wordpress.com, the whole site freezes with this message: “A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.
Script: https://wordpress.com/calypso/…on.9d150ad99305d3192de9.min.js:16

Can you let me know if you’re able to replicate this issue in more than one browser? If you can share the name of your site or the username associated with your WordPress.com account, I’ll be happy to take a further look into this too.

1- I really need that the sub menu navigation block displays centered to the main menu link that it is linked to.
At this moment, it’s like your demo site and the sub-menu opens to the left of the main menu link.

You can use the following custom CSS (which was inspired by the way Dyad centres its sub menus) to centre sub menus in Harmonic:

@media only screen and (min-width: 64.063em) {
    .main-navigation ul ul {
        right: inherit;
        left: 50%;
        margin-left: -100px;
    }
}

To add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)

2- I really want to make the header reappear in a smooth way when scrolled, fade-in maybe.. instead of just “bumping in” like it is in the demo site.

You could get the header to appear consistently at the top of the page, and therefore remove the “bump” effect, with the following custom CSS:

@media only screen and (min-width: 64.063em) {
    #masthead {
        position: fixed;
        width: 100%;
    }
}

3 – I managed to get the footer fixed on the bottom of the first page (the site homepage) with css Position:relative; but it still appears fixed to the page scroll on other pages, like blog and projects for example, how do I get the footer to be fixed to the bottom of the page on the entire site?

Applying either position: inherit or position: relative to both #colophon and #footer-nav-wrapper should stop the footer appearing fixed on scroll across all pages of your site:

@media only screen and (min-width: 64.063em) {
    #colophon, #footer-nav-wrapper {
        position: inherit;
    }
}

Can you give the above a try and let me know how you get on?

Thanks!

Hi @siobhyb,

Wow.. Thanks a trillion times ??
Have been searching all over for those solutions for a whole day when I could just have asked before, hehe.. just great to see it getting closer to my vision, thanks!

In regard to wordpress.com freezing when getting stats from my rubengt.com site, it’s “funny” because it just happens on firefox (49.0.1), not IE. Any suggestions? ??

Just two “small” but important tweaks for know, everything worked like a charm, however:

1 – I would like to reduce the size of the sub-menu block and center the sub-menu page name.
Is it possible? If yes, how.

2- And I really like the idea of movement that the header gives when it slides out of view to reappear again, only wanted it to reappear in fade in instead of “bumping in” ??
Anyway to get this effect?

Thanks again Siobhan.

Instead of reducing the sub-menu block size, in the case of being possible to auto size the sub-menu to the link name inside that would be awesome ??

Hi @rubengt,

In regard to wordpress.com freezing when getting stats from my rubengt.com site, it’s “funny” because it just happens on firefox (49.0.1), not IE. Any suggestions? ??

I recommend going through the troubleshooting steps set out by Firefox here:

https://support.mozilla.org/en-US/kb/troubleshoot-and-diagnose-firefox-problems#w_2-clear-your-cookies-and-cache

Let me know how you get on and if any of the above steps resolve the issue.

1 – I would like to reduce the size of the sub-menu block and center the sub-menu page name.

You can control the width of the sub menu with the following custom CSS:

@media only screen and (min-width: 64.063em) {
    .main-navigation ul ul li a {
        width: 200px;
    }
}

Setting the value of width to auto would make it adapt to the length of the menu’s link name.

In order for the sub menu to be centred underneath the parent, however, the sub menu needs to have a set width, with the value for margin-left (in the following snippet that I gave in my last reply) being set to half of the set width:

@media only screen and (min-width: 64.063em) {
    .main-navigation ul ul {
        right: inherit;
        left: 50%;
        margin-left: -100px;
    }
}

2- And I really like the idea of movement that the header gives when it slides out of view to reappear again, only wanted it to reappear in fade in instead of “bumping in”

Creating a fade in effect would require more advanced code that goes beyond the scope of support that this forum is intended for. If you’d like to have an experiment, though, then I recommend the following resources as a starting point:

• https://www.tutorialspoint.com/css/css_animation_fade_in_right.htm
• https://webdesign.about.com/od/css3tutorials/a/fade-in-and-out-with-css3.htm
• https://fabriceleven.com/dev/create-animations-on-page-scroll/

Hope that’s helpful! ??

Thanks a lot for your patience and great tips ??

You’re most welcome, @rubengt! We’re right here if anything else comes up, too.

Quick doubts..

– How to change the Tagline size in Css code.
– How to make social links on the header menu to open on a new page.

Thanks again, you are precious ??

• This reply was modified 8 years, 4 months ago by Ruben G.T..

Hi @rubengt,

– How to change the Tagline size in Css code.

To start with, you can define the tagline’s font size on smaller devices (mobile phones, tablets, etc.) with the following custom CSS:

#header-branding h2 {
    font-size: 28px;
    font-size: 2.8rem;
}

Smaller devices tend to require a lower font size in order for the whole tagline to fit nicely within the width of the screen.

You can then define the font size of the tagline on larger devices (most desktops) with the following:

@media only screen and (min-width: 64.063em) {
    #header-branding h2 {
        font-size: 58px;
        font-size: 5.8rem;
    }
}

In both of the above snippets, increase/decrease the first “px” font-size value to your liking and make sure that the second “rem” value is exactly one tenth of it.

The first “px” value acts as a fallback for the “rem” value. If you’re interested, then you can find more details on the technicalities behind this here.

Hope that helps you out. ??

– How to make social links on the header menu to open on a new page.

You can get your links to open in a new browser tab by following these steps:

• Navigate to Appearance > Menus in your WordPress admin area.
• Select the Screen Options tab in the upper right and check the option next to Link Target.

• After the Link Target option has been checked, a new setting will appear under each of your menu items: Open link in a new tab.

• Check that new options and save changes to your menu.

Let me know how you get on with that!

Wow @siobhyb, truly amazing to work with people like you that make an otherwise complicated and tedious task to do, in a fun, easy and productive solution, and all in a breeze ??

You are golden my friend ??

Thanks again and until my next challenge.

You’re welcome, @rubengt! Your kind words truly made my day and I’m glad I could help.

You know where to find us if anything else comes up.

• This reply was modified 8 years, 4 months ago by Siobhan.