There is great documentation on how to change or remove the handheld menu links in WooCommerce available. However, I have noticed that many mobile designs (mweb and apps) are trending towards showing text as well as icons for handheld menus. I want to display the text for the link UNDERNEATH the icon, as well as the icon itself.
It looks like WooCommerce has intentionally hidden the text for the handheld link using CSS:
.storefront-handheld-footer-bar ul li>a {
height: 4.235801032em;
display: block;
position: relative;
text-indent: -9999px;
z-index: 999;
border-right: 1px solid rgba(255, 255, 255, .2)
}
My suspicion is that I should just change the text-indent and the text will show back up. For example, in the instructions provided by WooCommerce to add a new home link to the handheld menu, my thought was that changing text-indent in the CSS would allow me to display both the icon and 'Home'.
function jk_home_link() {
echo '' . __( 'Home' ) . '';
}
But, I can't quite figure out how to "undo" the text-indent so that the text for the link shows as well. Any thoughts?
The text is hidden due to "text-indent: -9999px;" so you can change it as follows.
Here I am additionally added "line-height:" to arrange position of the text.
.storefront-handheld-footer-bar ul li > a {
text-indent: 0px;
line-height: 95px;
}
If you need to adjust position of the icons, you can add following css and make changes on the value.
.storefront-handheld-footer-bar ul li>a::before {
line-height: 2;
}
Related
I have some stuff I'd like to change in my dropdown. The website is https://community.entermedschool.com/
Below is the list of things I have tried along with the code I used. But none of them seem to be working...
Increase the font size for all of the items in the dropdown menus.
Change the font-weight for all the items in the dropdown to 400.
#primary-menu * {
font-size: 17px;
font-weight: 400;
}
Auto-scale the dropdown size so that all the items fit in one line.
.sub-menu {
width: fit-content;
}
Any help would be much appreciated!
Thanks in advance!
Edit:
The dropdown with which I want these changes is the primary header which I have highlighted here:
I want all of the dropdowns to basically expand automatically so that all of the content 'breathes' in it.
Your width: fit-content; is working but there is no space left for the ::after (the right arrow >). Therefor you could add a margin-right to each li in the submenu (for example 15px) and subtract that amount from the right-property of the ::after:
.sub-menu li {
margin-right: 15px;
}
.site-header .sub-menu .menu-item-has-children:not(.hideshow):after { {
...
right: 0; //instead of 15px
...
}
It works if i change it in the dev tools...
I am trying to change the background on the Blog page of my website. The current website is all black backgrounds, but I would like the Blog page to be white with black text. I need to have my own CSS as Squarespace does not support this as a custom setting.
I have already tried codes provided for things like this, but nothing has worked. For instance: https://answers.squarespace.com/questions/14800/how-can-i-change-the-content-background-color-on-only-one-page-using-css.html
#main { background-color: #ffffff; }
I would like the background color to change.
You may target the blog specifically via its collection ID, which Squarespace adds as a class for you, on the body element. From there, we must target the div that is its immediate child, .overflow-wrapper.
Insert the following CSS via the CSS Editor:
.collection-5d0a3c81de1f2b00012ccccc .overflow-wrapper {
background-color: white;
}
Because the text is white, it will appear invisible. You should be able to adjust the titles and other meta-information (author, date, tags, categories, etc.) using the Style Editor.
However, I don't believe the style editor will give you an option to alter the body text (p elements) on the blog separately from the rest of the site. Therefore you may also find the following CSS helpful for changing body text on blog pages to black:
.collection-5d0a3c81de1f2b00012ccccc p {
color: black;
}
In addition, you may need to add some CSS to address the header, which as a result of setting a white background will be unreadable.
.collection-5d0a3c81de1f2b00012ccccc.site-spacing-small .site-header, .site-spacing-small .site-page, .site-spacing-small .site-footer {
margin-top: 0;
margin-bottom: 0;
padding-top: 3vw;
padding-bottom: 3vw;
}
.collection-5d0a3c81de1f2b00012ccccc #header {
background-color: black;
}
And finally, the page title should also be set to black:
.collection-5d0a3c81de1f2b00012ccccc .page-text-wrapper .page-title {
color: black;
}
I've been reformatting the Coupon Code box on the Woocommerce checkout page. It was originally huge and at the top of the page, which is terrible design because people will see the big coupon code box and leave your site to go look for a coupon, then never come back.
I have the coupon box where I want and it works just fine if you press enter. The issue is that you can't see the Apply button. It is right below the coupon code box. If you hover over it, the little hand cursor appears. You just can't see it.
How can I get the button to appear to the right of the coupon code box on desktop? It'll get pushed below it on mobile.
You will have to add an item to the cart to see the checkout page: http://198.199.114.131/shop/
Checkout page: http://198.199.114.131/checkout/
Add this style to your theme style.css or any frontend custom css file:
form.checkout_coupon input[type="submit"] {
opacity: 1 !important;
color: #fff !important;
background-color: #dba633 !important;
width: 48% !important;
}
form.checkout_coupon{
width:100% !important;
}
form.checkout_coupon #coupon_code{
width:50% !important;
}
Add this:
input[name="apply_coupon"] {
opacity: 1 !important;
float: left;
background-color: bisque !important;
min-width: 100%;
margin-top: 1em !important;
}
From what I can see, it's the background: none !important; that's not letting you see anything near the coupon box. Remove that piece of code and you can see the button, however, there is no text on the button.
To put the button under the coupon code input box, remove the background: none !important; where you have specified it and then add the following code in your theme's custom CSS or child theme's CSS file:
.woocommerce-cart .entry-content .woocommerce .actions .coupon .button {
top: 60px;
}
Currently, top: 3px; is specified.
To display the text, add this code to your theme's custom CSS or child theme's CSS file:
.woocommerce-cart .entry-content .woocommerce .actions .coupon .button:before {
content: "Apply Coupon";
}
You can change the Apply Coupon text to whatever text you want to display there.
What I have offered above is a workaround as I do not know what edits you made to the coupon box during your reformatting, but it should solve your problem.
Hope this helps.
Problem
I can't get a consistent position for my navigation menu vertically. It is presently in the correct position on most pages, but on internal e-course pages it is lower and I don’t know why. I've changed the code a bit in trying to figure things out and I can no longer find the vertical positioning code—though I thought it was there when I looked at it a few days ago and yet the position on most pages is correct!
I wonder what is the position measuring from?. I coded it (when I thought there was a code for the vertical position) thinking it was measuring from the top of the page which is something that doesn't change from page to page, but if that were the case it would not change on the internal e-course pages.
Motive
I need a second navigation menu on a Wordpress site I am setting up for e-courses. The navigation menu that comes with the theme is set above the header and I want a navigation at the bottom of the header that matches and basically links my other sites. The menu should basically look like the ones here: http://www.midlifecrisismarriageadvocate.com/stand.html and at my blog. Though I think I would like it if it were more like the second (WP blog) example where all the items do not spread out to take up the entire width of the navigation bar.
I added the second menu by following the instructions from this post: http://premium.wpmudev.org/blog/add-menus-to-wordpress/. I've also posted my latest problem ther—though I recently changed the css again—with no resolution to my problem. I also posted my problem at the wordpress.org forums and received no response.
Theme
I am using a child theme I created from the theme that came with the Zippy Courses plugin—social triggers for zippy courses theme.
CSS Code
Sorry for all the notes; I got this from some online tutorial and customized it for my colours. I've added to some of the notes with my changes, comments or confusions.
.top-nav {
height: 45px;
padding: 0;
margin: 0;
position: absolute; /* Ensures that the menu doesn’t affect other elements */
border-right: 0px /*solid #a5dcc2; */
}
.top-nav li {
height: auto;
width: auto; /* Each menu item was 148px wide, changed to auto */
float: left; /* This lines up the menu items horizontally */
/*text-align: center;*/ /* All text is placed in the center of the box, removing this changed nothing--text is still centered */
list-style: none; /* Removes the default styling (bullets) for the list */
/*font: normal bold 14px;*/
font-family: Georgia, Verdana, Arial, sans-serif;
padding: 0;
margin: 0;
background-color: #b7f5d7;
}
/*The next code styles the anchor tags that are found in each list item. Each anchor tag is the same size and shape as the list item.*/
.top-nav a {
padding: 2px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 0px solid #BEF6DB;
border-right: 0px solid #a5dcc2;
text-decoration: none; /* Removes the default hyperlink styling. */
color: c91640
display: block;
}
/*The next style is responsible for changing the color of each menu item’s background when hovered over with a mouse pointer. .*/
.top-nav li:hover, a:hover {
background-color: #82bfa2;
font-color: #ffffff
}
/*The next two styles are related. The first style hides the drop-down menu, while the second style displays it when a mouse pointer is hovered over the main menu item.*/
.top-nav li ul {
display: none; /* Hides the drop-down menu */
height: auto;
margin: 38px; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
}
.top-nav li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
I've installed the Social Fixer plug-in to tinker with the CSS of Facebook. I've been doing a decent job and playing with the overall look of it except for one little detail that's been bothering me
I've reached the point where I've decided to change the Facebook logo to a gif I got online and modified. The change is made no problem except that clicking on the logo no longer takes you back to the Facebook homepage.
The change I made is the following:
#pageLogo
{
content: url('http://i.imgur.com/hrsJAJh.gif');
height: 82%;
width: auto;
position: relative;
left: -35px;
}
I've tried using background-image: url(...);, but it just puts my new logo behind Facebook's official logo. I realize that using content: url(...); is also changing (i.e. removing) the anchor to the homepage found in:
<h1 id="pageLogo">
<a data-gt="{"chrome_nav_item":"logo_chrome"}" href="https://www.facebook.com/?ref=logo">Facebook</a>
</h1>
I've tried changing the content of the anchor itself to add the link back to the homepage:
#pageLogo a
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
#pageLogo a:link
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
#pageLogo a:visited
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
#pageLogo a:active
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
#pageLogo a:hover
{
background-color: transparent;
content: url('http://www.facebook.com/');
}
But it doesn't work and I'm guessing that's because I'm changing the content of the anchor (i.e. the "Facebook" text) and not the actual "href" of that anchor.
I've looked here for anyone with a similar problem and most answers said to modify the HTML or use Javascript instead. With Social Fixer, I am only able to modify the CSS.
I've checked w3 for an attribute for "href" and "data-gt" just in case, but no luck.
Just to reiterate after all this text, I want to change Facebook's logo while keeping the link to the Facebook homepage only using CSS.
The Facebook logo is, at the time of this answer, a background-image of the a link inside the h1#pageLogo, not the background of the element itself. This is why your attempt at changing the background-image resulted in an image behind the logo.
You'd want to change the background-image of the link. Something like:
#pageLogo a {
background-image: url('http://i.imgur.com/hrsJAJh.gif');
background-position: top left; /* probably */
height: "your image height";
width: "your image width";
}