CSS/code to hide & re-appear main nav as shown in demo – homepage 2(B)

[Hryciuk]

Hey,

Took me most of the day to get things up and running but getting there 🙂

I really love how clean the template/theme is. I fell for demo 2 or B, seems to have two names.

Love how the nav only appears after visiting another post or page.

I am currently using a variation of something you shared: body.home #navi-header { display:none; }

But of course it doesn’t turn the home nav menu on when coming back from another page.

Could you help me out and provide the code to do this CSS magic please!

You can check my site if you like, don’t mind that I scrubbed your images, they will be gone in a day or two, just how I learn a new theme. Recreate it exactly.

http://hryciuk.com

Also even with your provided css for the logo size, it seems to max out at 300px. Any way to deal with this? I think I would what 450 on desktop and the existing on mobile (guessing this is a breakpoint issue for mobile?).

Thanks so much!

[SeaTheme]

Hi,

Thank you for purchasing our theme. 🙂

1. I don’t understand this question. The header can hide on the home page only based on this CSS: body.home #navi-header { display:none; }, it works fine. So, what’s the question?

2.It is possible to adjust the max-width of the logo.

@media(min-width:768px){
 .logo-image {
    max-width: 450px;
 }
}

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[Hryciuk]

Thank you for the logo code..

I want the nav to appear on the home page when you return from a page, just like your demo behaves, I don’t want it to stay off forever. Just for the first load and until a user visits a post. Clicking the logo back the homepage the menu is then visible for the rest of the site visit.

Just like on this demo: https://theme.seatheme.net/arnold2/?hide_menu=true

Please Help.

Thanks

[Hryciuk]

Sorry a line in there is poorly written…

Click on the logo at the top of the post in the header to get back to the homepage then reveals the menu in its on state for the rest of the site visit. The menu only is hidden for the first visit of the site.

Hope this is more clear.

[Hryciuk]

Here is a quick screen cap of your demo, showing the behaviour I am looking for.

http://hryciuk.com/Demo.mov

It is what helped sell me on the theme to be honest. Love the simple tweak to usability like this!

[SeaTheme]

Hi,

Thanks for your information and video.

a. Based on your description. It needs special javascript codes to record cookies(if the first visit of the site). If a visitor first visits another page instead of the homepage, the Nav will not show on this page. It only hides on the FIRST-visit
ps: If visitor disables cookie, it will not work.

b. But for the demo page, the rule is different. The Nav is only hidden with the special strings ?hide_menu=true on URL https://theme.seatheme.net/arnold2/?hide_menu=true When visitors open a post, if the visitor clicks the Back button on the browser, the Nav still doesn’t now show.

I am not sure what’s the way to fit your requirement.

Best

[Hryciuk]

That’s too bad… it was really what sold me on your theme.

I love the minimal yet smart usability of that demo.

Any way you can share the JavaScript to do it and how and where I install it on my site?

Thanks so much!

[SeaTheme]

Hi,

Please don’t worry, I will share with you the code’s solution.
Please let me know if which(a or b) is fit your requirement.

Best

[Hryciuk]

I think version A sounds best. Thanks!!

[SeaTheme]

Hi,

Please install a plugin to add the js codes:
Install a custom js plugin like Simple Custom CSS and JS, after insrtalltation:
Go to: Custom CSS & JS > Add Custom JS: clean all codes in the editor, paste the js codes:

jQuery(document).ready(function( $ ){
 if ( document.referrer == null || document.referrer.indexOf(window.location.hostname) < 0 ) {
  $('#navi-header').css('visibility','hidden').css('pointer-events','none');
 }
});

refer the screenshot: https://www.dropbox.com/s/b5kuou90b6miyzy/qq20200808-122038.jpg?dl=0

Best

[Hryciuk]

Awesome!!!

Thanks worked great!

I used a plugin called “Header & Footer Scripts”, it’s free.

One last thing the logo size CSS you gave me still doesn’t seem to allow the logo to get any larger than 300px. Is there anything that can be done about this?

Thanks again!

[SeaTheme]

Hi,
Welcome!
There is height limitation(the default is 120px) also, please add the custom CSS:

.navi-show-center .logo-image {
    max-height: 170px;
}

Best

[Hryciuk]

Perfect!!!

One last thing…

Can I get the height and width CSS for the custom loading page logo too so I can match sizes.

Thanks!

[SeaTheme]

Please adjust by the custom CSS:

.page-loading .site-loading-logo img {
    max-height: 300px;
    max-width: 400px;
}

[Hryciuk]

Thanks so much for all the support..

Love theme and feel I now have a timeless site that should live for a long time. After 5 different themes for this site over the last 18+ years. This is by far my favourite.

Thanks again!

[SeaTheme]

Thanks!
It’s a huge encouragement!

[Author]

Posts