Main menu in Harmonic
-
I noticed today that the top menu on my site is no longer static. A perusal of the Harmonic theme demo and other sites yielded a similar result.
I found the static top menu to be one of the Harmonic theme’s most compelling features for long-form websites as it eliminated the need for excessive scrolling. Without it, navigation on the front page becomes particularly burdensome.
Unfortunately, the menu’s thin design that worked so beautifully in a fixed position is now, apparently, a liability, as it vanishes from the screen with even the most minimal of scrolling.
Is this a browser/OS issue on my end, or was this feature removed from the theme—and if so, is there some way to get it back?
I’m running Firefox on Mac OS X 10.10, though I’ve observed the same results in Safari and Chrome.
The blog I need help with is: (visible only to logged in users)
-
I see that there’s a way to do this using CSS. To clarify my first post, the primary menu was “sticky” on my site until today without custom CSS, as well as on other sites and blogs I visited that used the Harmonic theme. This may not have been the case for everyone, as I saw a similar discussion raised last week—hence my confusion.
-
I am surprised to know that the menu on Harmonic has even been sticky.
I am yet to come across a WordPress.com theme that has a sticky navigation menu, let alone Harmonic.
However as you said, I just made it sticky using the following simple Custom CSS:
#masthead { position: fixed; } -
I was surprised—and delighted—when I saw that the menu was sticky when I adopted Harmonic last month.
The menu would initially scroll with the page, then snap back into place and remain static at the top of the page. This was true of every page I encountered that used Harmonic until recently, so I assumed that it was a standard feature, and one of several significant reasons behind my decision to adopt Harmonic.
Thanks for the code. I’ll likely apply it soon.
-
I used the same css code you suggested to keep the menu fixed but it causes other issues with hiding page titles and it doesn’t seem to work well on mobile devices. The fixed menu is the primary reason I chose this theme. I wonder if a moderator can let us know if the menu will return to being sticky at the top as it was, as I don’t want to change theme again if it will be fixed back.
-
To clarify, you mean the menu across the top of the theme? It looks like the footer menu is in a fixed position currently.
-
-
I can also verify that the top menu was fixed until about a week ago. souldestructionblog, I had some of the same issues when I applied the css, though it depended on the resolution of the device.
Checking the “Include this CSS in the Mobile Theme” box in custom CSS seemed to help with tablets, but I don’t recall having issues with the original fixed menu.
-
No, I didn’t have issues with the original fixed menu either and I am sure it showed up on some mobile devices as well, and now I see the menu needs to be clicked to be viewed on mobile devices. If it’s not back to how it was, I think I’ll have to change themes as I would prefer a visible menu on larger mobile devices. It’s a shame as the theme is really striking, but not functional for what I need on that site.
-
Thanks for the clarification. This has been reported to the theme developers. I’ll let you know as soon as I hear back from them.
-
Thank you Shawna, could you also ask them about the social menu not showing on mobile devices too please? I’m trying to do a work around in CSS to place it in the footer, but struggling. If you know the code to do this, that would be brilliant. Many thanks, Ruth
-
I did a bit of testing of fixed header.
I added the aforementioned CSS and did not select Include this CSS in the Mobile Theme check box. I see the menu bar is fixed in PC, iPad and iPhone 5, exactly same as what I see in the PC, tablet and mobile screens in the Customizer preview window in my Dashboard.
One issue I noticed is, lengthy site title overflows the available space in the iPhone 5 screen and looks ugly. But short title that fits in the available screen area on the iPhone 5, looks fine.
One thing I don’t understand is: why http://soul-destruction.com/ ‘s menu bar is fixed in the PC and iPad but floats in the iPhone 5.
-
Also, I tested using Private mode in Safari on iPad and iPhone 5 to prevent any misleading results due to browser caching.
-
Thank you Chaitanyamsv, because my menu becomes longer on mobile devices when the arrows are clicked to open sub-menu items, I had to set it not to be fixed on an iPhone 5.
I was also trying to get the social menu to show on mobile devices but I don’t know if that’s possible. I tried fixing it in the footer but my CSS skills aren’t quite there yet.
I also noticed on some mobile devices the footer was fixed, so I have unfixed it with CSS.
-
Hi everyone,
I just wanted to let you know that our theme developers released a fix for this yesterday. Please let me know if there’s anything more I can help with. :)
-
our theme developers released a fix for this yesterday
I’m not sure what the fix is that your refer to. The header area menu is still not fixed. BTW, on my 12″ wide, 4:3 aspect ratio monitor, the header navigation menu displays as a three-bar drop-down menu by default. One zoom click out changes it to a horizontal menu. But neither are fixed.
Also, I’d like the ability to remove the navigation bar on the bottom. It’s unnecessarily wide and obstructive.
-
I tested on the theme’s demo site and the header area is fixed to the top of the screen. Can you try clearing your cache and cookies if this isn’t working for you?
You’re welcome to make changes to the footer bar, but you’re not able to remove it completely as the site’s credits are there and, per our ToS, you are not allowed to remove the credits.
Let me know if you’re still having trouble with the fixed header!
-
@shawnajroberts,
I think my browser is automatically cleared because of my privacy settings, but I just cleared manually at Tools > Options > Advanced > Network. No change.
Perhaps I’m misunderstanding what is meant by a fixed menu. I presume it means that when I scroll the menu will remain in place at the top of the screen. The header area menu does not do that on my website https://moodies1.wordpress.com/, using the Harmonic theme. When I scroll the menu disappears with the header out of view.You’re welcome to make changes to the footer bar…
Can it be made more narrow? Or, ideally, can the background be made transparent instead of black? Are you referring to CSS customization? WordPress and theme links do not bother me. The thick black bar does.
-
I just visited your site and scrolled down. Here’s what I see when I’m looking at your widgets section. You can see the header bar is still across the top of the site:
Can you tell me what browser and version you’re using currently so I can check if this is a browser compatibility issue?
Can it be made more narrow?
By this, do you mean less tall? I don’t see an easy way to do this, although someone in the CSS forum may be able to figure it out.
Here’s some code to make the bar transparent. It also makes the font color for the credits and footer navigation black, but this should be changed depending on the color of your pages since the footer credits must be readable:
#footer-nav-wrapper { background: transparent; } #footer-nav-wrapper .site-info a, #footer-nav-wrapper .main-navigation li a, #footer-nav-wrapper .main-navigation li a:visited { color: black; }This change does require the Custom Design upgrade to implement.
-
Whoops! Forgot to include the screenshot link when I view your site. Here it is:
- The topic ‘Main menu in Harmonic’ is closed to new replies.
WordPress.com Forums 