Re: [css-d] help with responsive navigation
What Greg said...
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ .menu-main-navigation-container
#menu-main-navigation {
display: block;
}
^ That is in your css files
On Fri, Nov 4, 2016 at 3:16 PM Greg Gamble wrote:
> Looks like the class names are different, and open and close quotes are
> missing for class and id attributes
>
>
> Greg
> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:
> css-d-boun...@lists.css-discuss.org] On Behalf Of Chris Kavinsky
> Sent: Friday, November 04, 2016 11:59 AM
> To: css-d@lists.css-discuss.org
> Subject: [css-d] help with responsive navigation
>
> I'm reworking a client site navigation to work better responsively and
> using a previous site as a model. I think I have the page code and css code
> correct, but I'm not getting the correct results. In short, the menu is
> collapsing when the screen is smaller but the link isn't toggling the menu,
> and I can't figure out why. Here are links:
>
> the site I'm working on:
> http://ipegstl.com/commercial/
>
> the site I'm trying to mimic:
> http://otpnet.com/
>
> here's the css code that works the button link for the toggling:
>
> /*Style 'show menu' label button and hide it by default*/ .show-menu {
> font-family: 'gandhi_sansbold';
> text-decoration: none;
> color: #fff;
> background:#af292e;
> text-align: center;
> padding: 10px 0;
> display: none;
> }
>
> /*Hide checkbox*/
> input[type=checkbox]{
> display: none;
> -webkit-appearance: none;
> }
>
> /*Show menu when invisible checkbox is checked*/
> input[type=checkbox]:checked ~ .menu-menu-1-container #menu-menu-1 {
> display: block;
> }
>
> @media only screen and (max-width : 1000px) {
>
> /*Make dropdown links appear inline*/
> #site-navigation ul {
> position: static;
> display: none;
> }
> /*Create vertical spacing*/
> #site-navigation li {
> margin-bottom: 1px;
> }
>
> /*Make all menu links full width*/
> #site-navigation ul li {
> width: 100%;
> }
>
> #site-navigation li a {
> width: 100%;
> background:#af292e;
> }
>
> /*Display 'show menu' link*/
> .show-menu {
> display:block;
> }
> }
>
>
>
> What am I overlooking?
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
> http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] help with responsive navigation
Looks like the class names are different, and open and close quotes are missing
for class and id attributes
Greg
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Chris Kavinsky
Sent: Friday, November 04, 2016 11:59 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] help with responsive navigation
I'm reworking a client site navigation to work better responsively and using a
previous site as a model. I think I have the page code and css code correct,
but I'm not getting the correct results. In short, the menu is collapsing when
the screen is smaller but the link isn't toggling the menu, and I can't figure
out why. Here are links:
the site I'm working on:
http://ipegstl.com/commercial/
the site I'm trying to mimic:
http://otpnet.com/
here's the css code that works the button link for the toggling:
/*Style 'show menu' label button and hide it by default*/ .show-menu {
font-family: 'gandhi_sansbold';
text-decoration: none;
color: #fff;
background:#af292e;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
-webkit-appearance: none;
}
/*Show menu when invisible checkbox is checked*/ input[type=checkbox]:checked ~
.menu-menu-1-container #menu-menu-1 {
display: block;
}
@media only screen and (max-width : 1000px) {
/*Make dropdown links appear inline*/
#site-navigation ul {
position: static;
display: none;
}
/*Create vertical spacing*/
#site-navigation li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
#site-navigation ul li {
width: 100%;
}
#site-navigation li a {
width: 100%;
background:#af292e;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
What am I overlooking?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] help with responsive navigation
I'm reworking a client site navigation to work better responsively and
using a previous site as a model. I think I have the page code and css code
correct, but I'm not getting the correct results. In short, the menu is
collapsing when the screen is smaller but the link isn't toggling the menu,
and I can't figure out why. Here are links:
the site I'm working on:
http://ipegstl.com/commercial/
the site I'm trying to mimic:
http://otpnet.com/
here's the css code that works the button link for the toggling:
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: 'gandhi_sansbold';
text-decoration: none;
color: #fff;
background:#af292e;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
-webkit-appearance: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ .menu-menu-1-container #menu-menu-1 {
display: block;
}
@media only screen and (max-width : 1000px) {
/*Make dropdown links appear inline*/
#site-navigation ul {
position: static;
display: none;
}
/*Create vertical spacing*/
#site-navigation li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
#site-navigation ul li {
width: 100%;
}
#site-navigation li a {
width: 100%;
background:#af292e;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
What am I overlooking?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
