Menu Centered But Not Completely Responsive

Hi, apparently you’ve adding some style to

.navbar-wrapper .navbar.resp .nav > li

it should be disabled for devices < 979 px with a css media query :
@media (max-width: 979px) {

}

Hope this helps

Thanks, nikeo, for your help.

I tried deleting various sections of the style that I had added to my styles.css without luck.

I do not understand “it should be disabled for devices < 979 px with a css media query :”

@media (max-width: 979px) {

}

Where do I put this code?

I changed the one section you mentioned like this:

.navbar-wrapper .navbar.resp .nav > li   @media (max-width: 979px) {
float:              none;
display:            inline-block;
}

and that moved the menu to the left margin.

Am I misunderstanding?

I also tried adding this code in its own section, like this

@media (max-width: 979px) {

}

without any code between the brackets, but that didn’t work. Am I supposed to add something to go between the brackets?

Working backwards, #4, what would you expect to happen? No code = nothing happens.

#3, is not valid code. It should be:

@media (max-width: 979px) {
.navbar-wrapper .navbar.resp .nav > li {
float:              none;
display:            inline-block;
}
}

Thanks, rdellconsulting. I have added your code. Unfortunately, my menu on smaller devices is still not correct. Doesn’t the code between the brackets for the media query need to be different in order to disable the style for smaller devices? Clearly, I’m missing something.

Sorry, I was missing as I came in halfway through. Looking in your style.css, my @media code was trying to show you the syntax rather than the content.

You should aim to place @media at the end of the style.css, not in the middle as it is right now. So move it to the bottom, and remove the content (4 lines) leaving a blank @media which we’ll use if we need to.

Remove the @import at top as not needed.

This will get us back to the start of your question, and I can examine what’s not working.

I really appreciate that you are working with me.

I believe I have now done everything you have asked.

I’ll be very interested to see how we correct what’s still not working on smaller devices.

Let’s start by replacing the @media with this:

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

.navbar-wrapper .navbar.resp .nav > li {
float:      none;
display:    block;
}
.nav-collapse.in.collapse {
width: 	    20%;
}
}

You have some css conflicting but it will be easier to diagnose with the above code in place

Wow, much better! The menu is too far to the right on my smaller devices, but the vertical placement of each of the menu options looks great. Does this mean we have to reduce the 20%?

(As far as having conflicting code, I wondered about the code I added for hiding social media, as I was already able to hide them with the standard Customizr options. I thought that maybe even though they were hidden, there might be space allocated for them that would mess up the centering of the menu. I also have the plugin “Page Links To” activated, which I’m not sure I still need; I had it with an earlier version of Customizr so that “People” in my menu would go to the “BoD” page rather than a “People” page but I think the latest version of Customizr handles this better with the current settings I have chosen.)

I await your further advice with much appreciation.

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??

Hi, to recover your install :
1) connect to your FTP server
2) delete customizr and customir-child in wp-content/themes
3) upload one of the WP default themes if you haven’t one already there
4) connect to your WP admin
5) install the latest version of Customizr
6) if you use a child theme : carrefully check your child theme functions.php file before enabling it back

Hope this will help ??

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.

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

1) Correct 2) Correct

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?