I am looking to customize navigation bar on my wordpress site to have a Surrounding colour for a 'Get a demo' Menu, you can have a look at website in the below link
https://www.punchtab.com/
How can i achieve the same in my WordPress site?
Any help with this would be greatly appreciated!
Gareth
You can do this by adding background-color: #DC286D; to the header-login-nav in the css.
#header-login-nav
{
padding-right: 10px;
padding-left: 10px;
background-color: #DC286D;
}
So on your wordpress site, you would need to change it on the navigation class/id (it would depend on your theme).
EDIT:
#menu-main-menu
{
background-color: #000 !important;
}
Related
I use WordPress + WooCommerce to develop a website. I implement Products widget in the Elementor. I want to have red background #EC1D38 for the product title as shown as the image. The default settings do not have the background color setting. Any help will be appreciated. Thanks.
Sample
Current situation
I've added one class in your div is called "fruits".
Please add the below CSS to your CSS file.
.fruits h2.woocommerce-loop-product__title {
background: #ec1d38;
color: white !important;
padding: 15px;
margin: 0;
}
.fruits li.product.type-product {
padding: 0 !important;
}
.fruits a.button.product_type_simple {
display: none;
}
Can you please assist me with adding an indicator or Overlay on a Wordpress Website.
The website is https://www.thearcadestick.com
I need for the pagination at the bottom of the page to identify what current page the user is on.
This is the Custom CSS code I tried adding to the Wordpress site, but it didn't work:
span.page-numbers.current {
background-color: black;
color: white;
}
I did adjust the values to try different colors.
Thank you for your help.
try adding !important tag, I tried on your site it works.
span.page-numbers.current {
color: #cb2027 !important;
background: #000 !important;
}
How do I remove in Wordpress Avada Theme the top borders, which automatically appear everywhere and look like this:
I can remove them in Chrome dev tools just like this:
But if I put e.g. this css code inside the Avada themes custom css, it is still there:
#main .fusion-row {
border-top: 0px !important;
}
You can tru and edit the border thickness as it is:
#main .fusion-row {
border-top: 0px solid #fff !important;
}
#main .fusion-row {
display: none !important;
}
Use this CSS line in your additional CSS field
Or
You can go to the theme editor and look for header.php file look for header code remove it.
The solution was to consider the page id in the css:
.page-id-xxxx #main .fusion-row {
border: none;
}
I am trying to figure out how to change the font size of the navigation bar on my company's website: http://bicycle.ns.ca/
I've tried to edit the CSS through the theme that is currently installed but no changes occur still.
I also dived into the themes style.css file and tried various things like:
a {
font-size: 25px;
}
to no avail. Can someone point me in the right direction?
you need to edit properties of top menu tag.. try this!
.top-menu a
{
color: #6b6b6b;
font-size: 25px; <!–– Try Editing Here ––>
line-height: 12px;
display: block;
}
You can change the font site of the menu items in menu by adding the following CSS property for menu links
.top-menu a{
font-size: 12px !important;
}
I have a number of issues with my woocommerce pages in my wordpress site that I am hoping someone could help me with. They have been driving me crazy trying to fix.
My theme - Trias - http://www.mojo-themes.com/item/trias-multi-style-corporate-responsive-theme/ does not support woocommerce and this has creatd issues.
First one is the woocommerce pages - category and product fill the entire screen i.e. right to the edge. Any idea how I would change this to be in line with my theme?
At the bottom of these woocommerce category and product pages - the theme ends and you can see grey area beneath the theme area - any ideas on how to prevent this.
Final query and this one is the most annoying - the theme has a floating icon on buttons i.e. a floating small arrow on the left of the arrow before the words start. Problem is on the woocommerce pages - the floating arrow floats above the words on the button. It is super annoying.
My themes button is as:
button,
a.button {
display: inline-block;
position: relative;
margin-top: 30px;
border: 0 none;
/* background: #00a3da url("images/button-link-arrow.png") no-repeat 0 50%;*/
padding: 7px 12px 7px 35px;
text-transform: uppercase;
color: #fff;
font-family: "Oswald";
font-size: 16px;
line-height: 20px;
cursor: pointer;
Please see image of the button with floating arrow: image of button with incorrect floating arrow
Thank you very much in advance for any suggestions at all
— U P D A T E D —
Add this CSS rules to the style.php file of your active child theme or theme
For your icon buttons :
.button.product_type_variable.add_to_cart_button,
.single_add_to_cart_button.button,
button.single_add_to_cart_button,
.button.wc-forward {
padding-left: 34px !important;
}
.button.product_type_variable.add_to_cart_button:before,
.single_add_to_cart_button.button:before,
button.single_add_to_cart_button:before,
.button.wc-forward:before {
top: 6px !important;
}
For your content (only woocommerce pages):
.woocommerce .content-wrap {
width: 934px;
margin: 0 auto;
padding: 20px 30px 20px 36px;
}
You will have to add custom media queries and adapt the values of this rules depending on target screen resolutions.
I think that you haven't set correctly your pages (regarding your theme), that's why you have this kind of "content" problems on woocommerce pages:
The best way to solve this kind of issue is to contact author's theme support threads, opening a ticket.