How to centre the menu

nmssxty
(@nmssxty)

8 years, 1 month ago

Hello,

I have been trying to centre my horizontal menu in my header all night and have broken my site and wordpress admin panel at least 4 times. 404 notices, server error 500 and the white screen of death have all happened. I am actually getting to be a pro at fixing my site after these happen… but I am still none the wiser about how to not break it in the first place!

Please forgive me, I am new to editing code and a total newbie. I love entering code and seeing it work but more often than not I break everything! So I now try to stay away from it. I want to learn but I just do not seem to be getting this. I think I am doing something wrong when entering in code to style css and functions php. Things always seem break when I try to edit my functions php.

At first I tried adding the code into my child themes functions php through the wordpress editor, this broke everything. After fixing it in CPanel I tried adding the code into my actual non-child functions php file but this again broke everything.

I am entering in this code from this support page:
https://wordpress.org/support/topic/center-customizr-menu

I don’t understand how moving a menu a few centimeters to the side could be so complicated!!

Please please please help me 🙂

Thank you in advance
Nicola

Viewing 6 replies - 1 through 6 (of 6 total)

CustomizrLuvr
(@customizrluvr)

8 years, 1 month ago
CSS:
```
/* CENTER MENU */
.navbar-wrapper .navbar.resp ul.nav.tc-hover-menu {
display:            block;
float:              none;
width:              100%;
margin:             0 10%;              /* Adjust +/- % if needed */
```
PHP:
```
add_filter( 'tc_navbar_wrapper_class',  'rdc_navbar_wrapper_class' );
function rdc_navbar_wrapper_class() {
     return array('navbar-wrapper', 'clearfix', 'span12');
}
```
Thread Starter nmssxty
(@nmssxty)

8 years, 1 month ago

Thank you for replying customizrluvr and for the code!

I’ve added your code and it didn’t break everything!! 🙂 🙂 🙂

However the menu is now sitting completely over at the left hand site and nowhere near centered lol.

This is driving me nuts

Nicola

rdellconsulting
(@rdellconsulting)

8 years, 1 month ago

Drove me nuts too for ages.

I’ve setup a Gist for you to try.

It’s my first attempt to use Flexbox in Customizr. The first file gives the basic code. The second is a style.css including autoprefixer code.

When it’s been validated, I’ll tidy it and add a Snippet to PressCustomizr. Leave any fixes/comments in the Gist not here please.

2 links that may help you understand flexbox:
1) CSS Tricks
2) Wes Bos Tutorials

Thread Starter nmssxty
(@nmssxty)

8 years, 1 month ago

After propbably a full 24 hours of trying and breaking my site a few more times Ive managed it!

Tried this code changed the margin to 20 and it worked

}

/* CENTER MENU */
.navbar-wrapper .navbar.resp ul.nav.tc-hover-menu {
display: block;
float: none;
width: 100%;
margin: 0 20%; /* Adjust +/- % if needed */
}

/* Variable number of floating elements */
.navbar-wrapper .navbar.resp .nav {
float: none;
width: 100%;
text-align: center;
}

.navbar-wrapper .navbar.resp .nav > li {
float: none;
display: inline-block;
}

/* Adjust margin/padding */
.navbar-wrapper .navbar.resp .navbar-inner {
margin: 0px 0px;
padding: 0px 0px;
}

/* Remove page titles */
.page h3.entry-title {
display: none;
}

.menu-item {
text-align: left;
}

/* Adjust menu for smaller devices */
@media (max-width: 979px) {

.navbar .navbar-inner {
float: left;
min-width: 180px
}

.navbar .btn-navbar {
float: none;
}
.navbar-wrapper .navbar.resp .nav > li {
float: none;
display: block;
}
.btn.btn-navbar {
margin-left: 40px;
}

}

Thank you for your help again customizrluvr 🙂

Nicola

Thread Starter nmssxty
(@nmssxty)

8 years, 1 month ago

Im so sorry rdellconsulting, Ive just seen your post!

Thank you so much for that 🙂

That was so nice of you

Ill have a look at that in case of problems in the future. It appears to be working just now

Nicola

rdellconsulting
(@rdellconsulting)

8 years, 1 month ago

No problem. Maybe someone else will pick up the post and help me trial it.

Updated link to Gist

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘How to centre the menu’ is closed to new replies.

Tags