netniks

I would like to know if I am asking Bookshop to do something it can’t through Homepage Control, and if using shortcodes or something else is just as valid.

I took a screenshot of my site with the criteria stated above and uploaded it here: https://68.media.tumblr.com/d22953d3ef267b459021755863b55a5d/tumblr_ok3i1lXPT51skjgvjo1_1280.png

In the meantime, I turned the various plugins I have installed back on and limited the homepage to show Shop by Category. I added the shortcode [products ids=”53, 221, 15, 96, 37″] to my homepage to show additional products, since this approach constrains products to a simple row.

Once I figured it out, the author’s CSS at my previous link adapted well to changing Quark’s menu to show sub menus horizontally: https://loudfeed.tv/2012/03/horizontal-sub-menu-wp-themes/

The site that I am working on is behind a firewall, but I can share that I successfully added Margarete’s CSS to the style.css of my site’s child theme.

If you utilize Margarete’s CSS, change every instance of #main-nav to .main-navigation

Also, I changed her single instance of #navigation to #site-navigation

I have a lot more CSS refinements to make, but wanted to pass along that a.) a horizontal menu is achievable through just CSS, and b.) Anthony and Margarete already did the hard part for us!

Thanks and regards,
Todd

Hi dwood360,
I am not qualified to say what could be causing your content to shift, but I’m including everything in my functions.php and style.css files here.

Please note that I am using the Bookshop theme, and my site is framella.com

functions.php

<?php
/**
 * Functions.php
 *
 * @package  Theme_Customisations
 * @author   WooThemes
 * @since    1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * functions.php
 * Add PHP snippets here
 */

 add_action( 'init', 'jk_remove_storefront_header_search' );
 function jk_remove_storefront_header_search() {
   remove_action( 'storefront_header', 'storefront_product_search', 	40 );
 }

style.css

/**
 * Add any custom CSS here.
 *
 * This file will be loaded after all other theme stylesheets.
 */
#masthead {
    padding-top: 0;
    padding-bottom: 0;
}
#menu-item-131 a {
    padding: 8px 2px 8px 0;
}
.site-header {
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: inset 0 -3px 3em rgba(0,0,0,0), 0 1px 1px rgba(0,0,0,0);
}
.site-header:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-image: url("assets/images/header-bar.png");
    height: 0;
}
@media (min-width: 768px) {
  .site-header {
    	padding-top: 0em;
    	padding-bottom: 0;
	}
 .storefront-primary-navigation{
	clear: none;
	float:right;
	max-width: 300px;
	}
 .site-header .custom-logo-link{
	margin-bottom: 0;
	}
}
#menu-pre-menu {
    float: right;
}
.secondary-navigation {
    margin-bottom: .62em !important;
}
body {
    background-color: #ffffff;
}
.post-2 {
    margin-bottom: 0;
}
.column-full-width {
    margin-left: -999em;
    padding-left: 999em;
    margin-right: -999em;
    padding-right: 999em;
    background-color: #f8f8f8;
}

FWIW, the above PHP will unhook the search box from Bookshop, but will need to be accompanied by the following CSS:

@media (min-width: 768px) {
  .site-header {
    	padding-top: 0em;
    	padding-bottom: 0;
	}
 .storefront-primary-navigation{
	clear: none;
	float:right;
	max-width: 300px;
	}
 .site-header .custom-logo-link{
	margin-bottom: 0;
	}
}

Add the PHP to your functions.php file, and the CSS to style.css – both of which are available through the Plugins Editor after you have installed the Themes Customisations plugin. This essentially adds a Child theme to the Storefront child theme (in my case, it’s Bookshop) you may have installed.

Wow, Ben… you dialed-in on my need for a persistent menu state with just two CSS classes. That’s pretty neat!

I had to employ javascript on an older WordPress site to accomplish this, and I expected the same with Tracks, so I can appreciate how you had a .current-menu-item already defined.

This makes a theme from Compete Themes so much easier to customize for individual needs, and really rewarding to work on.

Thanks!
Todd

I just incorporated a smoother version:

#menu-item-58 > a {
  position: relative;
  color: #f78d1d;
  text-decoration: none;
}
#menu-item-58 > a:hover {
  color: #f78d1d;
}
#menu-item-58 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #f78d1d;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.1s ease-in-out 0s;
  transition: all 0.1s ease-in-out 0s;
}

Again, however, I don’t know how to implement the resting state of keeping the underline on the corresponding menu item page.

Thanks,
Todd

In the event that I didn’t make complete sense in describing the behavior, here’s a screenshot of the grid misbehaving: https://userpages.bright.net/~toddw/bookshop-featured.jpg

The slightly larger image in the “Posters” position on my website seems to be enough to throw off the grid.

I’m pretty sure that I just need to conform all thumbnails to the same pixel dimensions to avoid the grid conflict.

Thanks!

Hi Mikey, thanks for the response!

I apologize for implying that Storefront 2.0.5 was involved in causing my “Shop by Category” stage to misbehave. I don’t know if I have specifically isolated the issue, but the thumbnail for “Modern Fiction” in the first position (where “Crime” is on the Bookshop demo site) pushes the second row of thumbnails out of alignment with the grid. Or, something like that… the George Orwell thumbnail happens to be the largest of the demo thumbnails (488 pixels wide x 500 tall), and doesn’t play well with the other thumbnails, specifically if it is in the first position on the top row.

Setting the entire top row in the identical thumbnail (which shows George Orwell’s Animal Farm and 1984 book covers) doesn’t appear to mess with the grid, so I can’t come to a conclusion over what the issue exactly is. I can reproduce it, but if you go to my site at framella.com, you’ll see all of the thumbnails conforming to the grid.

My take away is that I should size every thumbnail to the same pixel dimensions, and the grid issues should be averted.

Thank you for viewing my site and looking into the issue!

Thanks for the info, James!

Todd

Thanks, James! That zeroed in on getting me to the full-width background-color. Thank you, also, for the recommendation to utilize Page Builder. I have tried Page Builder in conjunction with a different WordPress theme in the past, but got away from it when trying different themes.

I didn’t comprehend it at first, but I think that Storefront really shines as a lean theme ready for further customization.

For anyone reading this, I wrapped my content in a <div class="column-full-width">lorem ipsum</div> right in the Page content editor, and James’ CSS enabled the background color to fill the width of the browser. Here’s his CSS combined with mine:

.column-full-width {
margin-left: -999em;
padding-left: 999em;
margin-right: -999em;
padding-right: 999em;
background-color: #f8f8f8;
}

Thanks again,
Todd

I installed Storefront Designer and re-ordered the “Storefront Homepage Content” stack to fall below the “Homepage Parallax Hero” stack.

Thanks,
Todd

For the time being, I added the following CSS to remove the white gap:

.post-2 {
	margin-bottom:0;
}

Any thoughts on how to rid the block without the CSS would be appreciated.

Thanks,
Todd

More investigation… the screenshot at this link shows that

<article id="post-2" class="post-2 page type-page status-public hentry">

via the Web Inspector in Safari is the culprit for generating the white gap. It has a default margin-bottom of 67.78px. When I set the margin to 0px, the white space goes away.

Now, why is a post being inserted here, and how do I remove it?

Thanks and regards,
Todd

Revisiting this… I created a new install of WordPress, and continue to get the extra space between the menu and hero image, as seen here at framella.com.

If Storefront WooCommerce Customizer will allow me to remove the white space, I don’t mind purchasing it.

I currently added this to the Themes Customisations style.css, but cannot eliminate the white space:

.site-header {
	padding-top:1em;
	padding-bottom: 0em;
}
.page-template-template-homepage .site-main {
    padding-top: 0em;
}

Thanks and regards,
Todd

Hi Ben,
FWIW, my site description would be off in mobile view, but toggle on when I clicked on the hamburger button.

Does it make sense that this CSS doesn’t remove the site description, but rather, bumps it down and out of the way of the hamburger menu?

.site-header.toggled .site-description {
  padding-top: 40px;
}