Primary Menu Not Showing

Hi
My primary menu is not showing. Completely confident I have everything set that is should but it’s not. Could the problem be that the header is currently white and menu writing not visible?
http://aussiebookthreads.sevenlittleaustralians.com/

Hello there,

Yes, you’re correct. The default color of the mobile menu button is white. That’s why it is invisible on your site. You have to make it darker by adding the following custom CSS code through Appearance > Customize > Additional CSS. Be sure that you’ve running the latest version of WordPress (4.7), which this option only be available on this version.


.btn-menu{
  color: #397cbf;
}

Regards,
Kharis

Kharis
I did as you advised, also extended slider picture up to be incorporated into header and still the menu is not showing.
Can you please advise as to why it may not be working.

I have gone into customise>menu> and have my ‘main menu’ set to primary menu and it’s still not showing

Hello there,

Sorry for the code doesn’t work for you.

Yes, the menu isn’t visible because you added the following CSS code to hide the header bar before scrolling event.


.site-header:not(.float-header) {
    display: none;
}

Try to replace it with this one:


@media only screen and (min-width:1025px){
  .site-header:not(.float-header) {
      display: none;
  }
}

Regards,
Kharis

Kharis
Thanks for trying to assist, didn’t quite work. Did change it so the header bar is visible again but still now menu.
Any other suggestions?

Okay, what I’ve actually got it as far as doing is having 3 bars horizontally at the top of static page. When I click on them the menu words pop up. So a little closer.
however what I want is those menu words to appear across the header, visible without hovering.

Hello there,

Sorry that the code didn’t work.

Could you please try doing the following steps?

  1. Edit the js/main.js file
  2. Find and replace this line:

responsiveMenu();

with:


// responsiveMenu(); 

  1. Open the js/main.min.js, then replace all of its code with the code which resides in the js/main.js file. Because main.min.js is the one which is loaded on your site. You might need to minify it using this tool: https://jscompress.com/

  2. Save changes, then upload it through FTP account or hosting file manager

  3. Afterwards, apply the following custom CSS code:


.btn-menu{
  display: none !important;
}

#mainnav{
  display: block !important;
}

@media only screen and (max-width:767px){
  
  #mainnav{
    float: none;
    display: table !important;
    margin-left: auto;
    margin-right: auto;
  }
  
}

Regards,
Kharis

Thanks Kharis,
Problem is I don’t know where to find the js/main.min.js.
All I could find was the 'custom CSS & JS > Add custom JS so couldn’t find files there

You can find it in the theme package; download it from here https://wordpress.org/themes/sydney/. Then edit it locally on your computer. Once you’re done, you can update it through FTP or your cPanel’s file manager.

Please read this tutorial about using FTP to update the files on your hosting server.

Regards,
Kharis

Kharis

okkay, you’re stretching my technical confidence here, will digest this in small bits and see what I can manage.
Why would it not be just simply working with a click of a button?