Nav Footer formatting

Support
#1

Hi I am trying to replicate my old site (https://www.storeitcold.com/) on my new staging site: https://www.newsite.storeitcold.com/

I am struggling to recreate the bottom footer with all the links. I got all the links in place but now I want to fix the styling to match the original style. How can I do this?

#2

Hi @Web_Services,

Try adding thie custom CSS on Theme Options > Global CSS

.x-colophon { /*Set footer background*/
    background-color: #5b5b5b; 
}
.x-colophon .widget_nav_menu ul li a ,
.x-colophon .widget_nav_menu ul li a:hover{ /*remove borders and set fonts*/
    border: none;
    box-shadow: none;
    color: #eee;
    font-family: "Open Sans";
    font-size: 12px;
    text-shadow: none;
   colo:#fff;
  padding-left: 0;
}
.x-colophon .widget_nav_menu ul li a:hover { 
text-decoration: underline;
}
.x-colophon .widget ul { /*remove borders*/
    border: none;
    box-shadow: none;
}
.x-colophon .widget_nav_menu ul li a:hover{ /*remove white hover color*/
    background-color: transparent;
}
.x-colophon h4.h-widget { /*Headline font*/
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 0.1rem;
    font-size: 15px;
    color: #fff;
}
.x-colophon .widget a:before, .x-colophon .widget a:after { /*remove arrows*/
    content: "";
   padding-right:0;
}
.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-colophon-content a,
.x-colophon.bottom .x-colophon-content a:hover { /*set copyright font*/
    font-family: "Open Sans";
    font-size: 12px;
    color: #fff;
    text-align: left;
}

More customization from here would be getting into custom development and it is outside the scope of our support. For more guidance, check the following:

In case you want full editing and styling control, you might want to consider using Pro theme instead. Using footerl builder, you have all the options to build it as you want. Unlike X theme footer where structure and design are already theme and set by stack, using Pro footer builder you have the freedom to create it from scratch or use a template as basis.

#3

Thank you so much, this is really good to have!

Also, if I wanted to get rid of the navbar footer menu altogether, how could I do that?

I might recreate this as a global block so I can easily add photos and icons too. Is there a way to automatically add a global block to the bottom of every page?

Also, my big hesitation about using a global block set up is that I would not be able to keep the WPML language translator that I currently have in the footer there (at the bottom left of the screen). Do you know how I could add that?

#4

Hello @Web_Services,

Thanks for updating the thread. :slight_smile:

Under X > Theme Options > Footer Toggle Footer menu to remove menu from footer section of website.

You can take a look at solution shared in following thread:

Please take a look at solution shared in following resources:

Thanks.

#5

Is it possible to turn the menu footer off but still keep the built by Optimotive one?

#6

Hello @Web_Services,

Yes, you can. Simply go to X > Theme Options > Footer. You should be able to enable or disable any parts of the footer that you do not want to display.

Hope this helps.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.