/* CSS */ .site-nav { display: flex; align-items: center; padding: 5px; position: relative; top: 12px; } .site-nav__list li a:hover , h2.post-title a :hover{ color: #000; } ul.sub-menu { list-style: none; } .site-nav__list li a { padding: 0px 10px; font-size: 20px; font-weight: 500; color: #000; position: relative; top: 7px; } .site-nav__logo img { display: block; height: auto; width: 100%; max-width: 200px; } .site-nav__list { display: flex; margin: 0; padding: 0; list-style: none; position: relative; z-index: 2; } .primary-menu li { margin-right: 1rem; text-decoration: none; display: inline-table; list-style-type: none; } .site-nav__toggle { display: none; background-color: transparent; border: none; cursor: pointer; } .site-nav__icon, .site-nav__label { display: block; width: 24px; height: 2px; background-color: #333; margin: 4px auto; transition: all 0.5s ease-in-out; } /* style for the top-level menu items */ .site-nav__list > li { display: block; position: relative; } /* style for the submenu */ .site-nav__list > li > ul { display: none; position: absolute; top: 100%; left: 0; padding: 0; margin: 0; background-color: #008080; /* change this to your preferred background color */ } /* show the submenu when hovering or tapping on its parent menu item */ .site-nav__list > li:hover > ul, .site-nav__list > li:focus > ul { display: block; } /* style for the submenu items */ .site-nav__list > li > ul > li { display: block; padding: 15px; width: 230px !important; } /* style for the submenu item links */ .site-nav__list > li > ul > li > a { padding: 10px; color: #fff; /* change this to your preferred text color */ } .menu-item-has-children:focus > .sub-menu, .menu-item-has-children:hover > .sub-menu, .sub-menu:focus { display: block; } /* show the submenu when hovering or tapping on its parent menu item */ .site-nav__list > li:hover > ul, .site-nav__list > li:focus-within > ul { display: block; } .head-main .entry-share a { color: #000; position: relative; top: 20px; margin: 10px; } .head-share.entry-share { text-align: right; } @media (max-width: 767px) { .site-nav { display: flex; align-items: center; padding: 5px; position: relative; top: -6px; } .site-nav__list > li > ul > li { /* display: block; */ padding: 0px; width: 250px !important; } ul.sub-menu li a:before { content: "\00BB \00a0"; color: #fff; } ul.site-nav__list.visible li { padding: 10px; } ul.site-nav__list.visible li a { color: #fff; } h1.site-title a { color: #fff; } p.site-description { color: #fff; } .site-nav__icon, .site-nav__label { display: block; width: 32px; height: 6px; background-color: #fff; margin: 4px auto; transition: all 0.9s ease-in-out; } .site-nav { flex-wrap: wrap; background-color: #008080; } .site-nav__logo { flex: 0 0 100%; margin-bottom: 1rem; } .site-nav__list { flex: 1 0 100%; display: none; flex-direction: column; padding: 0 1rem; background-color: #008080; color: #fff; } .primary-menu li { margin-right: 0; margin-bottom: 1rem; } .site-nav__toggle { display: block; } .site-nav__toggle.active .site-nav__icon:nth-of-type(1) { transform: rotate(45deg) translate(7px, 7px); } .site-nav__toggle.active .site-nav__icon:nth-of-type(2) { opacity: 0; } .site-nav__toggle.active .site-nav__icon:nth-of-type(3) { transform: rotate(-45deg) translate(7px, -7px); } .site-nav__list.visible { display: block; } /* style for the top-level menu items */ .site-nav__list > li { display: block; position: relative; margin-bottom: 12px; } /* style for the submenu */ .site-nav__list > li > ul { display: block; position: static; padding: 0; margin: 0; background-color: #008080; /* change this to your preferred background color */ } /* show the submenu when tapping on its parent menu item */ .site-nav__list > li.active > ul { display: block; } /* style for the submenu items */ .site-nav__list > li > ul > li { display: block; } /* style for the submenu item links */ .site-nav__list > li > ul > li > a { display: block; padding: 10px; margin-left: 15px; } } @media (max-width: 767px) { .site-nav__list { display: none; } .site-nav__toggle:focus + .site-nav__list, .site-nav__toggle:hover + .site-nav__list, .site-nav__list:focus-within { display: block; } .site-nav__toggle:focus .site-nav__icon, .site-nav__toggle:hover .site-nav__icon { background-color: #fff; } }