How to show the menu bar when the site is loaded

First off, amazing theme! It is seriously brilliant! I’ve searched high and wide for a theme for my needs and found perfection here.

Here is my site:

I like the idea of the welcome area, however it wasn’t really what I wanted on my photography site.

Instead, I was hoping to see if there was a way to have the site title and tagline menu box show up at the bottom of the page instead of just having the header image fill the screen, and then have to scroll down to then see the site title and tagline menu box show up. Is there a way to code it so that box will automatically show up at the bottom? And then the user can then scroll down and see the rest of the page instead of just having the header image and blank welcome area show up?

Any answers would be greatly appreciated! I tried resizing the header image but it just zoomed it in a little. Not too tech saavy here. Thanks!

Yeah, I haven’t had my morning coffee yet so I’m not sure I follow :slight_smile:

  1. You haven’t posted a link to your site
  2. What do you mean by bottom of the page? I’m guessing you mean at the bottom of the viewport? For that you would need to move the menu inside the header from the header.php file.
  3. Resizing the image will just mean that a smaller image will expand to a bigger area, hence the zoom effect. This can be easily removed from the scripts.js file and your header image will have the actual height of your image.

So, post a link, explain a bit further and I’ll help. You can even take a screenshot and draw on it what you want to achieve.

  1. Sorry about that! I thought I posted it but I guess it messed up.

The site is

  1. Here are the examples of what I currently see:

And here is what I would like to see:

How would I go about moving the menu inside the header from the header.php file?

  1. That’s what I was thinking haha that’s what I tried already but to no avail.

Really appreciate your patience and help!

You would need to create a child theme.

In that child theme, you must overwrite the header.php file and move the whole top-bar div just before the closing tag.

Next step is to add this to the style.css of the child theme:

.top-bar {
   position: absolute;
   bottom: 0;
   width: 100%;

PS1. You should really configure your front page and add some blocks. The documentation is here.
PS2. Great mountain photos you got there!

Vlad, really appreciate your quick response! Thanks!

Okay so I created the child theme, but all it says in the style.css of the child theme is:

Theme Name: Moesia Child
Theme URI:
Description: Moesia Child Theme
Author: aThemes
Author URI:
Template: moesia
Version: 1.03
Tags: Light, Two Columns, Three Columns, Right Sidebar, Fluid Layout, Responsive Layout, Custom Colors, Custom Background, Custom Header, Custom Menu, Featured Images, Sticky Post, Theme Options, Threaded Comments, Translation Ready
Text Domain: Moesia-child

@import url("…/moesia/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

Sorry I am new to all of this. How do I overwrite the header.php file and move the whole top-bar div just before the closing tag?

And where would I add that on the style.css of the Child theme? Would really appreciate more pointers! Sorry for the hand holding!!

Thanks! I’ll upload more pictures as time allows and I’m planning on utilizing more of the theme with additional boxes too. Thanks for sending the documentation!

The child style.css seems good.

  1. Make a folder, call it moesia-child, and place that style.css in it.
  2. Next, open the main theme, copy the header.php file and place it in the moesia-child folder. You can also copy the screenshot if you want.
  3. Have a look here. The top-bar (lines 61-76) was below the header, now it’s inside it. You can copy the whole code from there and replace the one in your child header.php.
  4. Put the code I gave you in my last post in the child style.css, right below that line.
  5. Zip that folder and upload&install it, or upload the folder directly.
  6. Don’t forget to activate the child theme. Now your customizations are safe from being deleted by any futher update.

Also, not sure if you noticed, you can add a title, a description and a button above the header image if you feel it’s too empty. See the Customizer.

Oh shoot. That just kept the header at the top. Nevermind! I’ll just try a different theme.


Appreciate the help :slight_smile:

Maybe You can help me:] I need to show the nav bar at bottom of landing page, like in pictures or

But there is one small (ok big) issue. I’m using Simple Custom CSS plugin, and in it I wrote a piece of code provided by You:

.top-bar {
position: absolute;
bottom: 0;
width: 100%;

Now the nav bar is doubled and when I scroll down, it took all space… :confused:
What I’m doing wrong?


Back then you didn’t have an option to show the nav bar before the header image, that’s why the code doesn’t do what you want.
Remove the code and go to Header image and reduce the header size. You can also display the nav bar at the top from Customize > Menu if you want.

Also leave your front page to standard, not full width or stretched.

Hello again! Thank You for previous answer! You are awesome:]

Maybe You can help me to understand why for Latvian page there is an issue with right side? Page is scrolling to right side but in English version everything works fine and there isn’t this possibility to scroll page horizontally. Interesting, all settings are same.

OK, fixed! Thank You!

Hello, I’m interested in the modification asked by the op, but the solution giver by vlad doesn’t seem to be working anymore since the so called top-bar div doesn’t seem to be in the header.php file anymore.

How can I perform a similar modification with new version of Moesia ?