I have been working with a Magento site which is still under development. I have added a custom dropdown menu script and it works fine in the home page,
zinnati.com.
But in the following page and all inner pages, it disappears when the mouse is moved to a sub menu.
www.zinnati.com/index.php/women.html
I still cannot find the issue. Can someone please help?
Thanks in advance.
your main container of inner pages is overlapping on top navigation bar, thats why the hover effect on link dose not working on area where main container is overlapping.
now i have saw a minus margin on "header2" class
so you need to remove that for getting proper result.
try removing bottom margin.
.header2 {width: 100%;padding: 0px;background-color: #000;/* margin-bottom: -10px; */}
I think there is a link to the RELATIVE position of the col-lg-12 too
Try this on your style.css
.col-xs-1, ...... .col-lg-12 {
/* position: relative; */
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
It's fix the issue for me...
Be careful for the global positionning of your element with this settings...
Related
I want change the main menu of Avada Wordpress Theme in the header to be left-aligned not right,
it is like this:
and I want it to be like this:
How can I do that in the CSS?
Notes:
I did that using the CSS, but the problem that it is not working in all screen sizes when I tested it, I did that with this code:
.fusion-main-menu {
position:static;
text-align:left;
margin-left: 0px;
margin-right: 30%;
margin-top:4px;
}
but it is not made it fixed aligned to the left with the same space in all screen sizes :(
Avada has option of create "Layout Builder".
With this option, you can create global header with avada page editor as per your need. And keep button out side of navigation to maintain left right position.
Using CSS Only :
Use .fusion-main-menu { float: left; padding-left: 50px; } and use JS to get last button to out of nav tag. and apply float:right to that buttton.
jQuery( ".fusion-main-menu li:last-child" ).wrap("<div class='cst_btn'></div>"); jQuery(".cst_btn").insertAfter(".fusion-main-menu"); Make sure you have menu with ".fusion-main-menu" class only once on page else use diff class or ID.
I'm trying to make a single link in a WordPress top navigation menu that has a different background color but running into some issues.
What I have works on most of my pages but others not (as seen below). I assigned a CSS class (.contact-us-menu) to the individual menu item in the menu builder in WordPress, but I can seem to figure out how to get it to work across all the pages.
Wrong. (https://www.csolsinc.com/insights/)
Correct. (https://www.csolsinc.com/insights/webinars/)
This is the custom CSS I added with the "Wordpress Add Custom CSS" plugin.
li.contact-us-menu {
background-color:#f47e00!important;
height:50px!important;
border-radius:50px!important;
padding-right:15px;
color:#ffffff!important;
font-weight:bold!important;
vertical-align:middle;
}
li.contact-us-menu a {
color:#ffffff!important;
}
Any advice?
I looked through both of your site pages to look for the differences and I am seeing this line affecting the 'wrong' links:
#top-menu .menu-item .dropdown-toggle {
position: relative;
top: 11px !important;
For a fix, with your I would either change the top to -1px as in your 'correct'
or try to add:
li.contact-us-menu {
line-height: 50px;
}
to your css.
I'm using WPExplorer's Total theme: You should be able to click this sentence to open the Total Theme from WPExplorer. You'll need to add something to your cart and get to the checkout page for the rest of this... I've asked the theme author for some help, but apparently, this is a WooCommerce issue.
Ok, fine. So I crack open my TeamTreeHouse account and go through as much as I can possibly find. No luck.
Now if you have the theme opened up, you'll see that the default checkout page puts ALL of the woocommerce_checkout_billing fields on the left and then all of the woocommerce_checkout_shipping fields on the right.
Now, if your store has almost no products that require shipping like virtual products and downloadable products, then there's a problem:
The checkout page is INCREDIBLY lopsided. There are tons of fields running down the left of the page and almost never any fields on the right-hand side of the page. What I'm attempting to do is make the checkout_billing fields be one left, one right, (new line), next one left, next one right, (new line), left then right again, then (if needed) display the "Ship to A Different Address" toggle appears. And then IF and only when the additional woocommerce_checkout_shipping fields are needed they again appear left, right, (new line) left then right, (new line) left & right.
The end result is that the checkout page has SYMMETRY on the forms instead of all being down the left side
The file from Woo that controls the checkout page is https://github.com/woothemes/woocommerce/blob/master/templates/checkout/form-checkout.php#L33 and starting at line 33 we see this:
<div class="col2-set" id="customer_details">
<div class="col-1">
<?php do_action( 'woocommerce_checkout_billing' ); ?>
</div>
<div class="col-2">
<?php do_action( 'woocommerce_checkout_shipping' ); ?>
</div>
</div>
What do I need to change to simply make the fields appear 1 left, 1 right, new line, 1 left, 1 right, on and on for the checkout_billing, then again in the checkout_shipping 1 left, 1 right, new line, on and on and on?
Thanks!
This seems more like a pure CSS question to me. Something like the following would be a start (assuming I understood what you were describing) and could be further customized. Use your browser's developer tools to inspect the elements and live-test their style rules.
First, we remove the 2 main columns. Then, we split the inputs into columns. Note, this doesn't include any responsive layouts.
.woocommerce .woocommerce-checkout .col2-set .col-1 {
float: none;
width: 100%;
}
.woocommerce form .form-row {
margin-right: 4%;
float: left;
width: 48%;
}
.woocommerce form .form-row-last {
margin-right: 0;
}
#helgatheviking provides a good answer, but this will change the row elements throughout the whole site.
Use the .page-id class with the checkout page ID to prevent issues with other pages that use the .woocommerce row classes.
.page-id-yourpageid .woocommerce .woocommerce-checkout .col2-set .col-1 {
float: none;
width: 100%;
}
.page-id-yourpageid .woocommerce form .form-row {
margin-right: 4%;
float: left;
width: 48%;
}
.page-id-yourpageid .woocommerce form .form-row-last {
margin-right: 0;
}
I've been trying to figure this problem out, but no luck. There's probably a simple solution that I'm missing. I'm working on a Home Page template that has 4 featured products. The featured products end up showing diagonally and the images also overlap the title, price, and add to cart buttons. If anyone can help, that would be great!
Here's a link to the page that the template is on: http://playground.krisyoungboss.com/home/
(Going to change the front page displays later)
And also here is the shop page link if anyone needs to compare: http://playground.krisyoungboss.com/shop/
Thanks❤️
You've got a collection of things going on.
First, the reason the things are showing diagonal is because you have a <pre> element in your code. I suspect you may have copy-pasted a shortcode, and in doing so picked up the <pre> they had wrapped the shortcode with.
So, first things first, edit that page in the WP dashboard, and change to the text view (tab in the top-right corner of the editor area). Look for this:
<pre class="brush: php; gutter: false">
Find it, and remove it (don't forget to remove the closing </pre> tag also).
Then, the reason your images are covering up the content below is because of this declaration in your stylesheet (on line 228 of your stylesheet):
img.wp-post-image {
border: 5px solid #000000;
border-radius: 5px;
float: left;
height: 300px;
margin-bottom: 15px;
margin-right: 10px;
width: 300px;
}
The float:left is applying to the images in your featured section, which is causing the problem. Additionally, the height / width are not good (although they are being overridden by other styles).
Remove float:left, or else add a style like so (after the above styles in your stylesheet):
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
float: none;
}
Finally, your add-to-cart button is too wide. You need to address the styles for it, also - it's spilling out of the parent li elements.
I'm having a weird issue with the way my Category page is displayed, elements of the selector are displayed in the body tag. This is causing an alignment issue with the navigation bar and the logo header.
Strangely enough this issue occurs only on the Category Page (Archive.php) while the same header.php file is loaded in all of the templates (homepage, product page, category page etc).
I've tried to disable all of the plugins but with no success and also reverted to the original archive.php file but the results are the same.
see the following link: http://www.best-foods-for-fat-burning.com/wordpress/?product_cat=%D7%91%D7%A9%D7%A8-%D7%91%D7%A7%D7%A8
Any assistance or guidance is well appreciated.
Regards
Ofer
Though it is very difficult to debug css without having the actual files in hand, but i think that the right padding in current_page_item is causing the problem,
nav li.current_page_item {
padding-right: 13px;
display: block;
height: 40px;
}
Change this to,
nav li.current_page_item {
display: block;
height: 40px;
}
And let me know. Think it should work.