• Maribor

    (@maribor)


    Hello,

    I have this problem for quite some time, could not figure it out thru css. It is possible that i’ve broken something because i’ve coded few things into style.css not thru Custom Css or child theme.

    Problem is that when i create child pages for pages that are displayed in main navigation (header) drop-down box for these child pages seems to not align properly. Also, search bar is a little off. I’ve tried with various css tricks and it seems that i’ve exhausted my all ideas so i’m writing here.

    I attach two screenshots. One showing not aligned drop-down menu and one showing search bar which escapes from header. I know that this two problems are somehow connected and i know that it can be connected also with the fact that i’ve struggled some time with aligning header, and as i said, i could mess something up. Now i cannot find css that is related to this drop-down.

    https://i.imgur.com/dGLMipf.png – DROP DOWN MENU NOT ALIGNED
    https://i.imgur.com/lGkluYd.png – SEARCH BAR TOO LOW

    Below i copy/pasted CSS main-navigation with all coresponding

    .main-navigation {
    	position: relative;
    	background: #343538;
    	font-size: 13px;
    	margin: 0 -35px;
            height: 59px;
    }
    
    .main-navigation [class^="icon-"] {
    	color: #CCCCCC;
    	display: inline-block;
    	font-size: 16px;
    	line-height: 0.5em;
    	margin-right: 15px;
    }
    
    .main-navigation a:hover [class^="icon-"] {
    	color: #FFFFFF;
    }
    
    .main-navigation ul {
    	display: inline-block;
    
    }
    
    .main-navigation ul:before {
    	content: '';
    	display: block;
    }
    
    .main-navigation ul:after {
    	clear: both;
    	content: '';
    	display: table;
    }
    
    .main-navigation ul li {
    	position: relative;
    	display: block;
    	float: left;
    }
    
    .main-navigation ul li:hover > a {
    	background: #00bcff;
    	color: #FFFFFF;
    }
    
    .main-navigation ul li a {
    	-ms-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
    	padding: 20px 35px;
    }
    
    .main-navigation ul li a,
    .main-navigation ul li a > * {
    	-webkit-transition: all 0.4s ease;
    	-moz-transition: all 0.4s ease;
    	-o-transition: all 0.4s ease;
    	transition: all 0.4s ease;
    }
    
    .main-navigation ul ul {
    	position: absolute;
    	top: 100%;
    	left: 0;
    
    	background: #464646;
    	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15); /* Third Level Items */
    	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15); /* Third Level Items */
    	box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    	display: none;
    	z-index: 99999; /* Third Level Items */
    }
    
    .main-navigation ul ul a {
    	width: 200px;
    
    	padding: 15px 20px;
    }
    
    .main-navigation ul ul li {
    	position: relative;
    
    }
    
    .main-navigation ul ul li:hover > a {
    	background: #00bcff;
    	color: #FFFFFF;
    }
    
    .main-navigation ul ul ul {
    	top: 0;
    	left: 100%;
    
    	margin-left: 0;
    }
    
    .main-navigation ul li:hover > ul {
    	display: block;
    }
    
    .main-navigation a {
    	color: #e2e2e2;
    	display: block;
    	font-weight: bold;
    	text-decoration: none;
    }
    
    .main-navigation.sticky {
    	-webkit-box-shadow: 0 2px 1px rgba(0,0,0,0.15);
    	-moz-box-shadow: 0 2px 1px rgba(0,0,0,0.15);
    	box-shadow: 0 2px 1px rgba(0,0,0,0.15);
    }
    
    body.has-menu-search .main-navigation ul {
    	margin-right: 59px;
  • The topic ‘Header drop-down box not aligned’ is closed to new replies.