Weird mis-alignment on nav menu items

Any ideas any one_

I think you need to start be reducing the complexity of your css file. Don’t style the menu using the css IDs of each item. Use their classes instead, that way li#menu-item-8, li#menu-item-25, li#menu-item-26, etc can be styled by one group of tags.

Secondly, it seems to me that your parent CSS is loading TWO parent css files, one with version 4.6.1 and the other with version 2.1.5. No idea why or how that is happening. Probably not causing any cosmetic grief but it will slow load times as every style is loading twice and one overriding the other.

As for your child CSS, replace your file with the following cleaned up code and see if it helps. Make a backup of your child css first:

/*
Theme Name: storefront child
Author: Carlos Jaramillo
Template: storefront
Version: 1.6.1
*/

/* write custom css */

/* Hide Page title*/
.entry-title {
display: none;
}
/* Space left from nav to content*/
.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header, .no-wc-breadcrumb .site-header {
margin-bottom: 0em;
}
/* Branding Space*/
.site-header .site-branding {
display: block;
width: 21.7391304348%;
float: left;
margin-right: 4.347826087%;
clear: both;
margin-bottom: 0.5em;
margin-left: -0.8em;
}

/* Main Desktop Nav */

@media (min-width: 767px) {
ul#menu-principal {
background: black !important;
padding-left: 1em;
margin-left: -1em;
}
ul#menu-principal li.menu-item {
color: white !important;
}
ul#menu-principal li.menu-item a:link {
color: white !important;
}
ul#menu-principal li.menu-item a:visited {
color: white !important;
}
ul#menu-principal li.menu-item a:hover {
color: #5fa0cd !important;
}
ul.sub-menu {
background-color: Black;
}
/*Show current page on Nav Menu*/

li.current-menu-item {
background-color: #808080 !important;
}
/* LATERAL COLOR*/
.storefront-primary-navigation {
/*clear: both;*/
/*background: rgba(0,0,0,.06);*/
background-color: #5fa0cd;/* #6e0000 deep red wine*//* #5f9bda neve like blue*/
/* neve like blue2 #5fa0cd*/
/* neve like blue3 #64a0d3*/
}
/* Alignment */

/* .main-navigation ul li a, .secondary-navigation ul li a {
display: -webkit-inline-box;
} */

/* end of desktop section */
}

/* remove white space on mobile navigation */
@media (max-width: 767px) {
.page-template-template-homepage .site-main {
padding-top: 0em !important;
}
}

/* Mobile Navigation Style */
@media (max-width: 767px) {
.main-navigation.toggled .handheld-navigation, .main-navigation.toggled .menu>ul:not(.nav-menu), .main-navigation.toggled ul[aria-expanded=true] {
max-height: 1750px;
/*font-family: arial;*/
background-color: #b5d3eb;/*text-transform: uppercase;*//*margin-left: 0.5em;*/
}
.main-navigation ul li a {
padding: .875em 0;
display: block;
margin-left: 3.2em;
}
}

/* LOGO / NAV DESKTOP Position – saves space on top */
@media (min-width: 767px) {
.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header, .no-wc-breadcrumb .site-header {
margin-bottom: 0em;
margin-top: -2em;
}
}

/*LOGO MOBILE POSITION*/
@media (max-width: 767px) {
.site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
max-width: 210px;
margin-left: 2em;
margin-top: -0.8em;
}
}

/* END SO FAR */

Hi … thanks for the info.

What can I do to solve the double loading of the css? .. I have custom css for some pages .. could be that causing the problem?

A minor thing now … the current menu item is some what bigger or a bit mis-aligned .. should I try a padding for it ?

THANKS A LOT !

From what I can tell, it is the same file loading twice with different version numbers. Do you have a function in your functions.php that is loading the parent CSS? With Storefront, you don’t need to do that.

Did you try my child css code, and did it clean up your NAV?

Yes I did try your css … only the nav menu part of it. It did work. Just the current menu item looks a tiny bit mis aligned .. that is why I was asking if I should try a padding for that?

For the functions.php I do have a function to load the parent css … I am going to try to remove it.

Thanks again.

It doesn’t look misaligned for me… maybe clear your browser cache?