Header visibility + Center Menu-Icon.

Website: https://www.puproket.com

Hi there,

(1) Center Menu-Icon (top-middle).

You can add this to the Appearance > Customize > Additional CSS area:

/* Center Menu Icon */

.menu-toggle {
    right: 50%;
}

(2) Fix Header-space on scroll-down… so this space is still seen on scroll-down.

Here’s something I was able to work up for this. It’s possible it may need to be tweaked once you test it a bit, but this should give you a good starting place:

body {
    position: relative;
}
.site-header {
    position: fixed;
    top: 0;
    opacity: 1;
    z-index: 1;
    background-color: #FFFDFD;
}
.menu-toggle {
    position: fixed;
    right: auto;
    height: 12px;
    width: 12px;
    top: 20px;
    left: 50%;
    margin-left: -12px;
}
.menu-toggle.hover,
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:active {
    top: 20px;
}
@media screen and (max-width: 782px) {
    .content {
        margin-top: 3em;
    }
}

In terms of learning more about CSS and using the browser’s built in tools, here are a few resources you can look into:

https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools

https://codex.www.ads-software.com/Finding_Your_CSS_Styles

https://codex.www.ads-software.com/CSS#CSS_Resources

Hi again,

You actually don’t need that first bit of code that I sent over. Just use the second, larger block of code, and it will center the menu and make the bar fixed as well.

Thanks David for the code, and the links. I’ve just trying it… it works! ?? Visibility of the header on scroll is perfect. (I haven’t used the first bit of code.)

There are a couple of issues:

(1) On my laptop, the total area of the Menu-button isn’t clickable: I have to hover over the top-left quarter of the box to be able to click. Also (perhaps related) on my ipad I have to click the Menu-button 3 or 4 times before it activates -as if the total-area of the box is not active.

Any ideas?

(2) The other issue is when viewing the site on a *phone*, the page /post Title is hidden under the header at the very top, i.e. it is too close to the header-area, and is partially obscured. -This issue does not exist when viewing on my laptop or ipad.

Please would you add some code to what you’ve already given which puts -n- amount of white-space between the header-area and post /page Title. I’d like to increase this space anyway, for aesthetic reasons, but I’m also hoping that this will resolve the (lack of) space issue on the phone.

Thanks again for your effort.
;

P.S. If this should be posted as a new support question, let me know -i’ll mark it resolved and open a new topic.

On my laptop, the total area of the Menu-button isn’t clickable

I see what you mean. Replace the two .menu-toggle sections with this:

.menu-toggle {
    position: fixed;
    right: auto;
    height: 48px;
    width: 48px;
    top: 8px;
    left: 50%;
    margin-left: -24px;
}
.menu-toggle.hover,
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:active {
    top: 8px;
}

As far as the iPad goes, if the above code doesn’t fix it, can you let me know if you have the same problem using the demo of the theme here?

https://wp-themes.com/scrawl

on a *phone*, the page /post Title is hidden under the header at the very top

This CSS should fix that:

@media screen and (max-width: 782px) {
    .site-content {
        margin-top: 3.0em;
    }
}

For more space, increase the 3.0 number.

That has completely done it, works on laptop and ios devices. The code for white-space is really useful, i can try different spaces to see which sits well.

This help has been great. I like this theme a lot, i think it could work very nicely for a writer’s site. It’s the tweaks that make all the difference -couldn’t do this without the CSS.

Thanks
??

Awesome! I’m glad I could help! Happy writing. ??