Need help with footer and few other minor problems

Ah, I think I didn’t had a view at them. So I have few other things I need help with. I will provide examples too. Can you help me with them too?

It depends on what types of problems they are. If they can be fixed with CSS, or possibly with JavaScript, I can take a look. But don’t expect a complete overhaul of your site.

I was working on the button on the website, tried to modify it with CCS style coding but couldn’t get what I wanted at the 1st place. There’s a button on the top header “Free Quote”, which I created using CCS. What I wanted to build is something similar in this site: https://creatives.pk/

Can you help me with this?

I also want code to change the spaces between each menu in menu bar at the top.

The button on the creatives site is created using an <svg> element. I’m not sure how you can duplicate it with the current <button> element. How did you get the <button> element into the menu as the last menu item? Did you use a plugin, or is it a theme option?

The spacing between menu items can be adjusted by adding this rule:

.menu li {
    margin-right: 56px;
}

56px is the current spacing.

@crouchingbruin Thanks, that code worked. About the <button> element I created, I used menu option and created a custom link with navigation as <button id=”navbtn”>Free Quote</button> and then updated appearance -> Pivot Styling Setting -> Custom CCS and used this code:

#navbtn {
Border-color: #FF0000
Margin-Top: 35%;
Border-radius: 70px;
position: absolute;
top: 50px;
position: absolute;
top: -14px;
display: inline-block;
}

So is it possible to change the look of my button to the one I want?

Save a copy of your custom link contents in case you want to back this procedure out.

Replace the Navigation label for that custom link menu item with this:

<strong>FREE</strong>QUOTE<svg version="1.1" class="trisvg" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" preserveAspectRatio="none" width="14px" height="5px" viewBox="0 0 14.017 5.006" enable-background="new 0 0 14.017 5.006" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.016,0L7.008,5.006L0,0H14.016z"></path></svg>

Then, in your custom CSS, add these rules:

#menu-item-138 {
   color: white;
   background-color: #ec2627;
   margin-bottom: -7px;
   clear:right;
   float: right;
   position: relative;
   font-size: 11px;
   font-weight: 700;
   color:#fff;
   text-align: center ;
   padding: 10px 10px 5px;
   border-radius: 2px;
   margin-top: 8px;
   margin-left: 20px;
}

#menu-item-138 strong {
   font-size: 17px;
   font-weight: 900;
   display:block;
}

#menu-item-138 .trisvg {
   position:absolute;
   top: 100%;
   left:0;
   width: 100%;
   height: 5px;
}

#menu-item-138 .trisvg path {
   fill: #ec2627;
}

#menu-item-138:hover,
#menu-item-138:focus {
   background: #fff;
   color:#000;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

#menu-item-138:hover .trisvg path,
#menu-item-138:focus .trisvg path {
   fill: #fff;
}

@crouchingbruin

Wow! It’s way too good. You’re just too awesome. Thanks for this, bud. It’s working fine, but I think it needs bit adjustment with position. Can you suggest the best position in the top and tweak it accordingly?

In the first CSS rule from the last post, try changing the value for margin-top from 8px to -10px (or whatever other value you think looks good).

Also, I see that the text is gray instead of white. Add these two rules:

#menu-item-138 a {
    color: #fff;
    text-decoration: none;
}

#menu-item-138 a:hover,
#menu-item-138 a:focus {
   color:#000;
}

@crouchingbruin It worked great. Thanks a lot. About the color change, I can’t change the color of it. Right? Or I can do it?

You want to change the normal color (red) or the hover color (white)? The red color is #ec2627, and there are two rules which contain this value. For the hover properties, look at the rules for hover which sets the background and fill properties to #fff (white).

@crouchingbruin

Upon changing the RED color to #4a88bf, the upper parts changes to #4a88bf but the ending part remains red. I have coded it that way. Can you look and tell me solution for it? If it’s complicated then I can stick with the red one, no problem. Also there’s last problem I am facing related to theme. Want last help in that.

There were two rules that you needed to change. The second one looks like this:

#menu-item-138 .trisvg path {
   fill: #ec2627;
}

@crouchingbruin

It worked. Thanks for this. The last problem I am facing and trying to solve since the full day is a problem with the theme, maybe. HeaderWrap Issue. I am facing issue with Overlay Bar Header. I have tried all the options to make the front page [home-page] with a Overlay Header. The theme do contain this option but in my case, I am unable to utilize it the right way as I have tried all the possible options.

Here’s the example of the theme, I am using: https://pivotwp.wpengine.com/home-corporate/

What exactly is the problem with the overlay header? When I scroll down the page, I see the header fixed at the top of the screen.

I want it to fill the top area/menu with the image/block. But it’s not operating that way. Like: creatives.pk and https://pivotwp.wpengine.com/header-overlay/

As I am using the same option as the above demo site, header-overlay, my website’s doesn’t stretch the image till the top. What could be the issue?