Display menu horizontally in footer, social icons hover and display

[yuriychubarenko]

Hi Guys,

I was wondering if you could help me with CSS a little.
I would like to build a footer on my website in a certain way:
1. I disabled the copyright field and put all the information in the footer – footer is configured to only have 1 column.
2. I inserted a menu widget which is normally displayed vertically in the footer, but I would like it to be displayed horizontally with vertical separators(Privacy Policy | Terms of Use | Safe Surf | Cookie Info) and be exactly in the middle. Just like here:
/home2/ (please insert my website name http://mywebsite.com/home2 – you can find it here Site/Page URL (optional). I would also like the links to stay the same colour when I hover over them. Is it possible to do?

3. I have also inserted social links there – large social icons – and would like them to be in the middle above the menu and copyright. Doesn’t matter what I did, they either remain aligned to the left, or they move but not into the middle. It’s also important for them to stay in the middle when I browse the website using mobile phone / tablet.

4. When you hover over SoundCloud icon – the cloud picture is not exactly in the centre – it’s on the right of the square – can that be fixed?
5. Is it possible for the social icons to stay the same colour when I hover over them?

Thanks a lot,

Yuriy

[Kyle – SUPPORT]

Hi

1) Not sure if this is a question?

2) Add this to your custom css:

.widget_categories ul > li, .widget_archive ul > li, .widget_nav_menu ul > li, .widget_recent_comments ul > li, .widget_meta ul > li, .widget_recent_entries ul > li, .widget_product_categories ul > li, .widget_layered_nav ul li {
  float: left;
  margin-right: 20px;
  border-top: 0;
}
.widget_categories ul > li a:before, .widget_archive ul > li a:before, .widget_nav_menu ul > li a:before, .widget_meta ul > li a:before, .widget_recent_entries ul > li a:before, .widget_product_categories ul > li a:before {
  content: "|";
  margin-left: 20px;
}

3) Add this to your custom css:

#footer-widgets ul.social-icons.large {
  width: 300px;
  margin: 0 auto;
}

4) And this:

ul.social-icons.large .soundcloud > a {
  padding-left: 9px;
}

5) So you want the icon to stay black?

– Kyle

[yuriychubarenko]

Hi Kyle,

Thanks a lot.

I have just pasted the custom CSS and still have a couple of things to fix:
1.
ul.social-icons.large .soundcloud > a {
padding-left: 9px;
}
That doesn’t seem to be working as the cloud sign is still not aligned to the centre of the orange square properly – it leans to the right.

2. Menu is displaying the way I want – thank you. Though, is there a way to get rid of the “|” separator sign after the last menu item?

3. Can the menu stay black when I hover over it?

4. I would like the menu to be in the centre of the page – just like the social icons – how do I go about it?

5. Is there a way to get rid of spacing between the lines of menu social icons, menu line and copyright info, so it just goes this way:

Icon1 Icon2 Icon3
Terms of Use | Privacy Policy | Cookie Info
Copyright 2015 Company Name
All Rights Reserved

Currently there is a massive amount of space between the lines:

Icon1 Icon2 Icon3

Terms of Use | Privacy Policy | Cookie Info etc

6. Yes, I’d like the icons to stay black when I hover over them.

Thanks,

Yuriy

[Kyle – SUPPORT]

1) I don’t see this in your custom css?

2) Try this:

.widget_categories ul > li:last-child a:before, .widget_archive ul > li:last-child a:before, .widget_nav_menu ul > li:last-child a:before, .widget_meta ul > li:last-child a:before, .widget_recent_entries ul > li a:before, .widget_product_categories ul > li:last-child a:before {
  display:none;
}

3) In your color customiser set the link hover color to black

4) Add this to your custom css:

.widget.widget_nav_menu.widget-2 {
  text-align: center;
  width: 366px;
  margin: 0 auto;
}

5)

#footer-widgets .widget {
  padding-bottom: 5px;
}

6)

ul.social-icons li a:hover {
  color: #111!important;
}

– Kyle

[yuriychubarenko]

Kyle, thanks.

1. I must have done something wrong – it works. Sorry.
2. Works, thanks.
3. Can we also please get rid of those squares that appear in different colours – blue for Facebook, orange for SoundCloud, and also animation. I basically don’t want anything to happen at all when you hover over social icons. They will just stay black and the same way and work as normal links.

4. Menu is in the centre, thank you. Though, now when I look at it on mobile phone, it’s not responsive anymore – part of it is disappearing.
5. Works great, thanks.

Yuriy

[yuriychubarenko]

Hi Kyle,

I have found a solution to 4.

I still need to fix 3 though (Can we also please get rid of those squares that appear in different colours – blue for Facebook, orange for SoundCloud, and also animation. I basically don’t want anything to happen at all when you hover over social icons. They will just stay black and the same way and work as normal links.)

I also have last two little things. Your help would be greatly appreciated.

1. I am currently using header 1 – is there a way to make main navigation menu to also be aligned to the middle of the page?

2. I noticed that font sizes do go larger than 60px – is there a way to somehow override that if I wanted to use a larger font for full screen ad?

Thanks again.

Yuriy

[Kyle – SUPPORT]

1) I’m afraid this layout is not possible with Dante, sorry

2) You would have to use custom css, if you provide me with the link to the page I will help you with the css

– Kyle