Forum Replies Created
-
Posts
-
Sorry to redirect, but can you please post this here:
https://github.com/bhadaway/stop-spammers/issues
Thanks
Hey Parth,
Believe it or not, I’ve never actually used Bootstrap, so I wouldn’t know the first thing about where to start with Bootstrap on something like that.
However, a few things that might be helpful:
— I’ve created my own CSS grid along with some other tools here: https://generic.tools/
— If you’re building this site on WordPress, all that design above would require is a basic left sidebar page template or to switch the #content and #sidebar floats for whatever theme you’re working with if there isn’t one.
Thanks
I tested the code above and it works as-is, but it looks like you’ve already customized your menu a great deal, which makes it very difficult for me to trace what’s been changed and what remains the same in order to adjust.
I’d need to get in there and see your code first-hand. Normally, I’d just use Firebug, but when it comes to dropdown menus and all the layers and hover and click effects, it makes it difficult. And I couldn’t really spend time “getting in there” unless you were paying me.
So, I’d recommend just replacing the whole menu with https://wordpress.org/plugins/responsive-menu/ and then re-customize the look.
This is by design. Generic is meant to be very simple and lightweight.
Here’s something a bit more advanced for you to give a try:
#menu{clear:both} #menu ul, #menu ul li{display:inline} #menu ul li a{display:inline-block;font-family:'lucida grande',helvetica,arial,verdana,sans-serif;font-size:16px;color:#777;line-height:51px;text-decoration:none;padding:0 20px} #menu ul li a:hover{color:#777;text-decoration:none;background:#eee} #menu .current-menu-item a, #menu .current_page_item a{color:#aaa} #menu .current-menu-item .sub-menu a, #menu .current_page_item .children a{color:#777} #menu ul > li:first-child a:hover{border-radius:0} #menu .sub-menu li a, #menu .children li a{line-height:14px !important;padding:8px 14px !important;border-radius:0 !important} #menu li .sub-menu, #menu li .children{margin-left:-1px} #menu ul li{position:relative} #menu li ul{display:none;position:absolute;top:35.5px;left:0} #menu li ul a{background:#eee} #menu ul ul li:hover ul, #menu ul ul ul li:hover ul{top:29px;left:0;margin:-34px 0 11px 200px} #menu ul li:hover ul{display:inline-block} #menu ul ul, #menu ul li:hover ul ul, #menu ul ul li:hover ul ul{display:none} #menu ul li:hover ul, #menu ul ul li:hover ul, #menu ul ul ul li:hover ul{display:block;z-index:2147483647} #menu ul li:hover ul li a, #menu ul ul li:hover ul li a, #menu ul ul ul li:hover ul li a{font-size:13px;line-height:30px;width:200px;padding:0 14px;margin:-1px 0 0} #menu ul li:hover ul li a{} #menu ul ul li:hover ul li a{} #menu ul ul ul li:hover ul li a{} #menu ul li:hover ul li a:hover, #menu ul ul li:hover ul li a:hover,#menu ul ul ul li:hover ul li a:hover{background:#eee;opacity:1} #menu .toggle{display:none;color:#000;text-align:center;line-height:51px} @media all and (max-width:767px){#menu label.toggle{display:block}#menu ul{display:none}#menu input.toggle:checked + div > ul{display:block}#menu input.toggle:checked + div > ul li a{display:inline-block;box-sizing:border-box;width:100%;border-right:none}#menu .sub-menu, #menu .children{position:absolute;width:180px;left:100%;margin-top:0;margin-left:-180px !important}#menu ul li:hover ul ul, #menu ul ul li:hover ul ul{top:26px;margin:0 !important}#menu .sub-menu a, #menu .children a{width:180px !important}}And you’ll want to remove the stuff related to
#menufrom@media all and (max-width:768px){}as well.If you’re not looking to dig around in code, a quick and dirty solution might be to just install a plugin to handle it for you:
https://wordpress.org/plugins/responsive-menu/
Thanks
I’m not entirely sure I understand the issue. Are both divs suppose to appear both on desktop and mobile, or one is hidden on desktop and they both display on mobile, or one displays on desktop and one on mobile and they switch places on mobile? Or perhaps I missed the point altogether of what’s not working.
Also, please share a live example if you can.
Thanks
Try updating:
nav ul ul { display: none; float: left; left: 0; position: absolute; width: 180px; z-index: 99999; }to:
nav ul ul { display: none; float: left; left: 8px; position: absolute; width: 180px; z-index: 99999; top: 60px; }Ah, I believe you’re referring to breadcrumbs.
1. Add this to functions.php:
function groundwork_breadcrumbs() { if ( !is_home() ) { echo '<div id="breadcrumbs"><a href="' . home_url() . '/">' . __( 'Home', 'groundwork' ) . '</a> → '; if ( is_category() || is_single() ) { the_category( ', ' ); if ( is_single() ) { echo " → "; the_title(); } } elseif ( is_page() ) { the_title(); } elseif ( is_tag() ) { _e( 'Tag Page for ', 'groundwork' ); single_tag_title(); } elseif ( is_day() ) { _e( 'Archives for ', 'groundwork' ); the_time( 'F jS, Y' ); } elseif ( is_month() ) { _e( 'Archives for ', 'groundwork' ); the_time( 'F, Y' ); } elseif ( is_year() ) { _e( 'Archives for ', 'groundwork' ); the_time( 'Y' ); } elseif ( is_author() ) { _e( 'Author Archives', 'groundwork' ); } elseif ( isset( $_GET['paged'] ) && !empty( $_GET['paged'] ) ) { _e( 'Blog Archives', 'groundwork' ); } elseif ( is_search() ) { _e( 'Search Results', 'groundwork' ); } elseif ( is_404() ) { _e( 'Page Not Found', 'groundwork' ); } echo '</div>'; } }2. Add this to header.php, underneath the main menu code:
<?php { groundwork_breadcrumbs(); } ?>Looks like you fixed the issue with the menu not appearing on all pages, but for the yellow margin, try:
.main-navigation { background-color: #000000; clear: both; display: block; float: left; margin-top: -6px; width: 100%; }I’ve added
margin-top: -6px;You could do something as simple as:
#topContainer { margin-top: 200px; }But, a proper solution would involve changing up the HTML and stacking order.
I’ve been working on creating better starter tools for websites, you might consider checking it out for projects:
