How to centre header and menu for Travelify WordPress theme

Travelify
1

Hi and thank you for a great theme! I want to centre the header and menu on my page instead of them being left aligned:
http://happyspirithandmade.com.au/.

I am using a child theme. I’ve spent such a long time going through topics in this forum and have found many that relate but I am still not able to get the suggestions to work on my page. So please accept my apologies for asking things that have been asked before and are no doubt very basic problems but I am very new to all this and am losing my sanity!!

2

Add this code to Theme Options - Other - Custom CSS or inside Child Theme style.css since you use one.

#site-logo {
    float: none;
    text-align: center;
}
#main-nav li {
    float: none;
    margin-left: 30%;
}
3

Thank you so much…this worked perfectly, can’t believe I have spent so much time trying to work out how to do this!

4

You might want to add this extra code to fix problem with sub-menu

#main-nav ul ul li {
    margin-left: 0;
}

Didn’t notice it at first. Once added to your website, I will test it again.

5

Thank you again. I did notice that problem but to be honest so happy to have it looking how I wanted I was happy to overlook it. So thanks for going the extra mile. I have added that code and it does look better, should it be a bit more to the right?

6

You can move it right if you like:

#main-nav ul li ul {
    left: 50px;
}

You can adjust value to get the results you like.

7

Fantastic, thank you again for your top support!

8

Hm, I am noticing some problems with centering both Header logo and menubar.

If I center the logo, it’s not the real center of the page. I think it is because of the social media icons. I am just using three. So I would like the logo to be the real center of the page.

Because if you center the menu using your code, it looks odd if both just are floating somewhere. Not responding to each other.

Is there a way to really center both and make it look good even on tablets and mobiles?

And last the submenus float somewhere too, not popping up under the item they belong to.

Probles with menu after centering it
Probles with menu after centering it1024×332 19.9 KB

I added this to my childtheme

#site-logo {
    text-align: center;
    float: none;
}
#main-nav li {
    float: none;
    margin-left: 30%;
}
#main-nav ul ul li {
    margin-left: 0;
}
9

I am trying to do the same with my Sparkling theme and centre the top menu. I can’t find it anywhere in the forum and I have not heard anything back from the questions I asked in the sparkling forum.

Can anyone help me with this?

10

@fuliyah

You can align menu for travelify theme without breaking submenu layout by using code like this:

#main-nav ul:first-child {
    margin-left: 30%;
}

If this doesn’t help, please post your website URL and will look into this problem.

11

Hello all,

I tried this for my menu bear and doesn’t work as I wish. Is there way to use css “position: centre;” or something similar to that.

I have also have drop down menu under travel and the drop down menu goes to the left and doesn’t show under travel when you hoover over “Travel”.

My site is www.theronakshah.com

Regards,

Ron

12

@Ron This is old topic so to help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/travelify-support/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.