[css-d] help with responsive navigation
Looks like I'm having hosting issues. The css file is updated (I can see the updates in the WP editor) but for some reason the site isn't refreshing the file. Thanks. __ 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
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 <ggam...@sbctc.edu> 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/