Hound Dog

Thank you, stellamaris5. Of course, you are right. I did not think of that. Sorry to waste your time, as well as Jan Dembowski’s.

This is the post in question:

https://www.ads-software.com/support/topic/center-customizr-menu?replies=7

I posted UA tracking code by mistake earlier today and do not want that to be left in public view. Is there anyway you can help?

And here’s functions.php:

<?php
/**
 * Enqueues child theme stylesheet, loading first the parent theme stylesheet.
 */
function themify_custom_enqueue_child_theme_styles() {
	wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'theme-style' ) );
}
add_action( 'wp_enqueue_scripts', 'themify_custom_enqueue_child_theme_styles', 11 );
add_filter('tc_credits_display', 'my_custom_credits');
function my_custom_credits(){
return '
<div class="span4 credits">
                    <p></p>        </div>';
}
add_filter('tc_content_title_tag' , 'my_title_tag');
function my_title_tag() {
    return 'h3';
}
add_filter( 'tc_navbar_wrapper_class',  'rdc_navbar_wrapper_class' );
function rdc_navbar_wrapper_class() {
     return array('navbar-wrapper', 'clearfix', 'span12');
}
add_action('wp_head','my_analytics',1,20);

function my_analytics() {
 ?>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-56805999-1', 'auto');
  ga('send', 'pageview');

</script>

 <?php
}
?>

Here’s style.css:

/*
Theme Name: Customizr Child
Version: 1.0
Description: A child theme of Customizr
Template: customizr
*/

/* HIDE SOCIAL ICONS */
.navbar-wrapper .navbar.resp .social-block {
display:            none;
}

/* CENTER MENU */
.navbar-wrapper .navbar.resp ul.nav.tc-hover-menu {
display:            block;
float:              none;
width:              100%;
margin:             0 10%;              /* 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;
}

}

You are absolutely right! I omitted the leading dot.

It all looks perfect! Thank you for taking so much time and care to resolve this issue for me. I am very impressed with the level of support you provide. I am also pleased with WordPress and Customizr in general, and in how it all works.

Kudos, and many, many thanks.

I just replaced the the three lines of code on lines 44-46:

.dropdown-menu > li > a {
text-align: left;
}

to:

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

and see no change anywhere. Did I do that right?

Strange. I have refreshed the cache and I get the problem whether I use Safari or Chrome. (I have a Mac.)

Just be sure I am explaining the problem accurately, the main menu is centered nicely, but when I click on the “People” option, the two dropdown options appear underneath, first “Board of Directors”, which is perfectly aligned under “People”, and then followed by “Project Leaders”, which is indented by one space.

Thanks, rdell, for your suggestion this morning, which is now live, and almost perfect! The menu looks great on small devices, and I like your solution of shifting the dropdown menu to the left. On my laptop, the menu is nicely centered, though the dropdown menu under PEOPLE is staggered by one letter. Any tweaks that might fix this?

Wow, on a Sunday too. Most impressive!

I tried adding your first option to the bottom of styles.css and that did fix the drop-down menu issue on all my devices. On smaller devices, the menu was nicely aligned vertically but too far to the right.

I then tried replacing all of styles.css with your second option. The menu was to the far left, and the drop-down menu was again staggered. I imagine I could add your first option to the 2nd, but I would really prefer to have the menu centered.

I have left it with the previous code, with the addition of your first option, but would like to have it looking good on all devices. In fact, it’s quite close; the menu looks great on my tablet in both orientations, and almost looks good on my phone if I hold it in the horizontal position.

Thanks for your latest code. I have followed your instructions and notice two things:

1. menu on laptop has changed; it is centered but the items under “People” are now staggered with “Leaders” being more indented than “BoD”, rather than being aligned one above the other as they were previously
2. menu on smaller devices is still too far to the right

Ideally, I would like to correct both these items.

Thanks again for helping me with this.

Thanks so much to both of you! It looks like I am now back to where I was before installing the latest version of Customizr. Phew!

So, I have just rechecked my website on smaller devices to see if somehow the newer version of Customizr somehow resolved my responsive menu issues. It seems we are right where we left off: the menu is nicely centered on my laptop but too far to the right on smaller devices.

Any ideas how to fix this?

Also, if I delete my Customizr child theme from within BlueHost, how will I be able to re-enable it?

THANK YOU, nikeo, for responding so quickly. I will try what you say but have two questions first:

Following your instructions, I will not be deleting any of the data on my website pages, correct?
Since I was using a child theme of Customizr, and my website was fine just before downloading the newer version of the Customizr theme, my code in the child theme (styles.css and functions.php) should be fine, right?

I’m a little paranoid that I will lose all my customized coding that was working pretty well.

I now seem to have an urgent problem. After posting (above), I decided to go ahead and update to the newer version of Customizr, which I did and I noted that it said the update was successful. But now I cannot access my website at all (www.teewinotinstitute.org). I cannot access my WordPress account either. I just see white screens in both cases. Thankfully, I can still log into my BlueHost account. I am at a total loss as to what to do and would appreciate anybody’s immediate help. Surely, I cannot have lost everything simply by downloading the latest version of Customizr??