• Resolved zeppelingraphics

    (@zeppelingraphics)


    Hi , I am having a real headache trying to turn the vertical child menus into horizontal menus.

    I have tried doing it through style.css in a child theme, but even if I remove all the “menu” css it still functions the same way (it remains a horizontal menu with vertical drop down child menus, removing all the various menus css only changes the styling on the text).
    there are also arrows next to parent links with children which I would like to get rid of.

    I am quite stuck! can anyone givve me some pointers. This is the css which I removed – to no real effect:

    .menu {
    	clear: both;
    	width: 100%;
    }
    
    .horizontal-menu {
    	text-align: center;
    	position: relative; /* Sets context for absolutely positoned submenus */
    }
    
    .header-menu {
    	margin: 2.5% auto 1.5%;
    }
    
    .sidebar-menu {
    	margin: 0 auto 1.5em;
    	text-align: left;
    }
    
    .footer-menu {
    	margin: 1.5% auto 3.5%;
    }
    
    .menu ul {
    	list-style: none;
    	margin: 0 auto;
    	padding-left: 0;
    }
    
    .sidebar-menu > ul {
    	margin-left: 2em;
    }
    
    .horizontal-menu li {
    	display: inline-block;
    	margin: 0 0.5em;
    }
    
    .vertical-menu li {
    	display: block;
    	position: relative; /* Set context for dropdowns*/
    }
    
    .menu > ul > li:first-child {
    	margin-left: 0;
    }
    
    .menu > ul > li:last-child {
    	margin-right: 0;
    }
    
    .menu a {
    	-webkit-transition: color 0.25s ease;
    	transition: color 0.25s ease;
    	display: block;
    	text-decoration: none;
    }
    
    	.menu a:focus {
    		outline: none;
    		color: #009BCD;
    	}
    
    /* Display a triangle to indicate that the menu has a child menu. */
    .menu .menu-item-has-children > a::after,
    .menu .page_item_has_children > a::after {
    	-webkit-transition: border-color 0.25s ease-out;
    	transition: border-color 0.25s ease-out;
    	content: '';
    	width: 0;
    	height: 0;
    	margin-left: 0.25em;
    	display: inline-block;
    	vertical-align: middle;
    }
    
    /* Down Arrow */
    .menu ul .menu-item-has-children > a::after,
    .menu ul .page_item_has_children > a::after,
    .sidebar-menu ul .menu-item-has-children > a::after,
    .sidebar-menu ul .page_item_has_children > a::after {
    	border-top: 5px solid #444444;
    	border-right: 5px solid transparent;
    	border-bottom: none;
    	border-left: 5px solid transparent;
    }
    
    /* Up Arrow */
    .footer-menu ul .menu-item-has-children > a::after,
    .footer-menu ul .page_item_has_children > a::after {
    	border-top: none;
    	border-right: 5px solid transparent;
    	border-bottom: 5px solid #444444;
    	border-left: 5px solid transparent;
    }
    
    .menu a {
    	color: #444444;
    }
    
    .menu ul > .menu-item-has-children > a::after,
    .menu ul > .page_item_has_children > a::after {
    	border-top-color: #444444;
    }
    
    	.no-touch .menu a:hover,
    	.menu ul li.open > a {
    		color: #009BCD;
    	}
    
    	.no-touch .menu ul > .menu-item-has-children > a:hover::after,
    	.no-touch .menu ul > .page_item_has_children > a:hover::after,
    	.menu ul li.open > a::after {
    		border-top-color: #009BCD;
    	}
    
    	.no-touch .menu a:active {
    		color: #007EA6
    	}
    
    	.no-touch .menu ul > .menu-item-has-children > a:active::after,
    	.no-touch .menu ul > .page_item_has_children > a:active::after {
    		border-top-color: #007EA6;
    	}
    
    .sidebar-menu a {
    	color: #009BCD;
    }
    	.no-touch .sidebar-menu a:hover,
    	.sidebar-menu ul li.open > a {
    		color: #007EA6;
    	}
    
    .sidebar-menu ul .menu-item-has-children > a::after,
    .sidebar-menu ul .page_item_has_children > a::after {
    	border-top-color: #009BCD;
    }
    
    	.no-touch .sidebar-menu ul .menu-item-has-children > a:hover::after,
    	.no-touch .sidebar-menu ul .page_item_has_children > a:hover::after,
    	.sidebar-menu ul li.open > a::after {
    		border-top-color: #007EA6;
    	}
    
    .footer-menu ul > .menu-item-has-children > a::after,
    .footer-menu ul > .page_item_has_children > a::after {
    	border-bottom-color: #444444;
    }
    
    	.no-touch .footer-menu ul > .menu-item-has-children > a:hover::after,
    	.no-touch .footer-menu ul > .page_item_has_children > a:hover::after,
    	.footer-menu ul > li.open > a::after {
    		border-bottom-color: #009BCD;
    	}
    
    	.no-touch .footer-menu ul > .menu-item-has-children > a:active::after,
    	.no-touch .footer-menu ul > .page_item_has_children > a:active::after {
    		border-bottom-color: #007EA6;
    	}
    
    .menu ul ul {
    	display: none;
    	float: left;
    	position: absolute;
    	left: 0;
    	z-index: 2;
    	background-color: #E3E5E7;
    	padding: 0.25em;
    	border-bottom: 2px solid #009BCD;
    	-webkit-box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    	box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    }
    
    .footer-menu ul ul {
    	width: 100%; /* Sets the width of the submenus same as the content */
    	bottom: 100%;
    }
    
    .vertical-menu ul li.open ul {
    	float: none;
    	position: relative;
    }
    
    .vertical-menu ul ul a {
    	width: 12em;
    }
    
    .menu ul ul a {
    }
    
    .menu ul ul li {
    	display: block;
    	width: auto;
    }
    
    .menu li:hover > a {
    }
    
    .menu ul ul :hover > a {
    }
    
    .menu ul ul a:hover {
    }
    
    .no-touch .menu ul li:hover > ul,
    .no-touch .menu ul ul:hover,
    .menu ul li.open > ul {
    	display: block;
    }
    
    .vertical-menu ul ul ul {
    	left: -0.25em;
    	top: 100%;
    }
    
    .header-menu ul ul { /* Sets the width of the submenus same as the content */
    	left: 3.75%;
    	right: 3.75%;
    }
    
    .header-menu ul ul ul { /* Sub-submenus won't like the above so we need to reset it */
    	left: 0;
    	right: auto;
    	top: 90%;
    	width: 100%;
    }
    
    /* Current Menu Item Madness */
    .menu .current-menu-item > a,
    .menu .current_page_item > a {
    	position: relative;
    	color: #009BCD;
    }
    
    .menu > ul > .current_page_item.menu-item-has-children > a::after,
    .menu > ul > .current_page_item.page_item_has_children > a::after {
    	border-top-color: #009BCD;
    }
    
    .sidebar-menu ul .current_page_item > a,
    .sidebar-menu ul .current_page_item > a {
    	color: #007EA6;
    }
    
    .sidebar-menu ul .current_page_item.menu-item-has-children > a::after,
    .sidebar-menu ul .current_page_item.page_item_has_children > a::after {
    	border-top-color: #007EA6;
    }
    
    .footer-menu > ul > .current_page_item.menu-item-has-children > a::after,
    .footer-menu > ul > .current_page_item.page_item_has_children > a::after {
    	border-bottom-color: #009BCD;
    }
    
    .menu .current-menu-item > a:hover,
    .menu .current_page_item > a:hover {
    	-webkit-animation: shake 0.25s ease 0.25s;
    	animation: shake 0.25s ease 0.25s;
    	color: #007EA6;
    }
    
    @-webkit-keyframes shake {
    	0%, 54%, 90% {-webkit-transform: translateX(-7px);transform: translateX(-7px);}
    	18%, 72% {-webkit-transform: translateX(7px);transform: translateX(7px);}
    	100% {-webkit-transform: translateX(0);transform: translateX(0);}
    }
    
    @keyframes shake {
    	0%, 54%, 90% {-webkit-transform: translateX(-7px);-ms-transform: translateX(-7px);transform: translateX(-7px);}
    	18%, 72% {-webkit-transform: translateX(7px);-ms-transform: translateX(7px);transform: translateX(7px);}
    	100% {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter zeppelingraphics

    (@zeppelingraphics)

    Ah – looks like I made the structure of the Child theme a bit wrong. Now I can change the CSs with more effect – wierdly it had some efect before too.

    I would still welcome any pointers towards making a horizontal child menu :).

    thanks

    Can you try adding the .horizontal-menu class to your menu. I already built out pretty full featured menu classes.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Horizontal Child Menu’ is closed to new replies.