sub-menu always visible

  • jingz

    (@jingz)


    9 years, 8 months ago

    Hello,

    I am using a child theme on Twenty Thirteen and want that the sub-menu is always visible, when the parent-menu-element is active.

    I try with css:

    .page-id-9 ul.sub-menu {
display: block;
}

    But it does not works. Submenu is stil only visible on mouseover, when I am on page-id-9.

    Has anyone a tip for me? 🙂

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 8 months ago

    Can you link your site?

    Rimfaxe

    (@rimfaxe)

    9 years, 8 months ago

    Hej Jingz,
    Do you make classes in CSS for all your pages?
    In CSS I think you should investigate the use og the “child selector”. Without knowing the rest of your CSS something like:

    ul>ul.sub-menu {
    display:block;
    }

    As I read your CSS it is like the combined use of two classes in a HTML tag.

    Thread Starter jingz

    (@jingz)

    9 years, 8 months ago

    Hi,

    the website is still on localhost and not available online.

    But here is the content of the style.css in the child-theme-folder:

    @import url("../twentythirteen/style.css");

.site, .navbar {
max-width: 1462px;
width: 100%;
}

.site-header .home-link {
max-width: 1462px;
width: 100%;
padding: 0;
min-height: 1px;
}

a.home-link img {
max-width: 1462px;
width: 100%;
height: auto;
}

body {
color: #295b60;
font-family: 'Yanone Kaffeesatz', sans-serif;
}

h1, h2, h3, h4, h5, h6, .widget .widget-title {
font-family: 'Yanone Kaffeesatz', sans-serif;
}

.widget .widget-title {
font-style: normal;
}

h1.entry-title {
font-size: 22px;
}

.site {
border: 0;
}

.site-header {
background: none!important;
	}

.navbar{
text-transform: uppercase;
background: transparent;
position: relative;
top: -48px;
}

ul.nav-menu {
background: #5d9ba5;
padding-right: 0!important;
}

.main-navigation {
left: 180px;
max-width: 1100px;
}

.entry-header, .entry-content, .entry-summary, .entry-meta {
margin-left: 370px;
}

.sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
    max-width: 1040px;
    padding: 0px 286px 0px 150px;
}

.site-footer .sidebar-container, .widget {
background: #295b60;
}

.nav-menu li a {
color: #fff;
font-size: 18px;
}

.nav-menu li:hover > a, .nav-menu li a:hover, .nav-menu li:focus > a, .nav-menu li a:focus, .nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a {
color: #5d9ba5;
font-style: normal;
background: #fff;
}

ul.sub-menu {
border: 0!important;
}

ul.sub-menu li a {
background: #295B60;
}

ul.sub-menu li a:hover {
color: #295B60;
background: #ededea;
}

.page-id-9 ul>ul.sub-menu {
display:block;
}

.site-footer a, .site-footer .widget a {
color: #fff;
}

.site-footer .widget-title {
color: #37a4b0;
text-transform: uppercase;
}

.widget {
text-transform: uppercase;
}

.widget ul li {
line-height: 1em;
}

    Thank you guys for help.
    I am good with css, but here I have no idea ;o)

    Pat K

    (@blackcapdesign)

    9 years, 2 months ago

    This is an old post, but maybe this can help someone else. The fix for this isn’t in the media query; in your child theme’s style.css file, look for this (around line 888):

    .nav-menu .sub-menu,
.nav-menu .children {
	background-color: #220e10;
	border: 2px solid #f7f5e7;
	border-top: 0;
	padding: 0;
	position: absolute;
	left: -2px;
	z-index: 99999;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

    and replace it with this:

    .nav-menu .sub-menu,
.nav-menu .children {
	background-color: #220e10;
	border: 2px solid #f7f5e7;
	border-top: 0;
	padding: 0;
	position: absolute;
	left: -2px;
	z-index: 99999;
	height: 100%;
	width: 100%;
	overflow: visible;
	clip: rect(1px, 1px, 1px, 1px);
}

    If you want to indent the children in your mobile menu, in your mobile query, use text-indent or margin-left. Something like this:

    .toggled-on .nav-menu li > ul {
	background-color: transparent;
	display: block;
	float: none;
	margin-left: 20px;
	position: relative;
	left: auto;
	top: auto;
}

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘sub-menu always visible’ is closed to new replies.

Tags