Nav Bar Compressed (squished) on Homepage Only

Please share a link to your site.

Did you try turning Jetpack off and seeing if the problem persists?

-Renee’

Renee’ — I deactivated Jetpack — and indeed the compressed nav bar on the homepage was restored. That’s the good news. The really bad news is that my Edit CSS customizatios went completely away (Genesis Prose Child theme). Which meant the hours and hours I put into making my site look somewhat professional also went away. Apparently the Edit CSS in Genesis is tied to Jetpack. (ugh)

So it seems I have two unfavorable choices. Either can have a normal-size nav bar on Homepage with ugly-looking site. Or I can have a nice-looking site — and a nav bar that is practically useless because it is so compressed.

I did try playing with the CSS Editor, and I did manage to make the nav bar more vertical (wider) on all the pages — except the Homepage where the problem lies. I made the nav bar bigger by adding “height: 70px;” to the following on the stylesheet for Edit CSS:

.menu-item-object-page a:active, .menu-item-object-custom a:active {
color: #333333 !important;
height: XXpx;
}

Does anyone know a custom code for de-compressing the Nav BAr on the homepage only?

Someway I can get around Jetpack?

Thank you.

I did it I think. In the paste below I added a new line that says “heigh: 1.em;
Here is the code I used, and now the nav bar looks more “full:”

#nav .wrap {
background: transparent !important;
border: none;
/*box-sizing: border-box;*/
overflow: hidden;
width: 100%;
height: 1.em;

The only problem with that was my social media buttons are now on top of the last menu item in the nav bar. Now Don’t know what to do about that. The code I found using Firebug Fix plugin (element inspector that is better than the default) might help me figure out a way.

}

I started on my Mac with my 2 social icons half on nav bar, half off. But on my son’s Alienware computer, the top of social icons were butted up against the top of the page and not entirely visible. So this Edit CSS stylesheet code in Genesis seemed to work:

#simple-social-icons-2 {
position: absolute;
z-index: 40000 !important;
width: 120px;
top: -15px !important;
left: -20px;
}

Now the social icons are right where they are supposed to be on the Alienware, and below the nav bar on my Mac. But I am just going to deal with it.

Seems even if page looks good on my mac, I have to add new code so that it appears somewhat correct on other devices and computers (like my iPad).

But alas, now the submenu on the Alienware is compressed (just a black compressed box — not the three submenu items). So have to go back in and fix that.

Any coding snippets for a compressed submenu(s)???? That you can help me out with? I sure would appreciate it.

So the upshot is that it has nothing to do with the device or computer. The nav bar looks fine in Firefox, but not in Chrome or Safari. I had to compromise Firefox to make it right in Chrome. But the drop down menu does not work at the top in Chrome or Safari due to the large Header image.

I did figure out how to place the nav bar under the Header image with the code snippet below. But it looked hideous. So I just put a message in the content of my Homepage to either use Firefox or scroll past the Header to access the menu items. Kind of a hackneyed solution, but what else can you do when it looks perfect in one browser and not the other.

I put this code snippet in the Edit CSS stylesheet using Genesis Prose to make the nav menu bar appear below the header. (But there was some strange “bar” that stayed at teh top as I scrolled down (my nav bar scrolls). Anyway, it ruined the look of the Website, so I switched it back. But in case anyone out there is interested:

//* Reposition the primary navigation menu
remove_action( ‘genesis_before_header’, ‘genesis_do_nav’ );
add_action( ‘genesis_after_header’, ‘genesis_do_nav’ );