Docs

[yhshin1020]

Hey,

I am wondering if I can use html to create a footer menu like the one on the bottom of Apple’s website.

the idea is that I want to display the headers, followed by the subheaders under the headers, all inside the footer.

I know this is possible with html, could you perhaps help me out?

Thanks!

[yhshin1020]

This reply has been marked as private.

[Paul R]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[yhshin1020]

This reply has been marked as private.

[Paul R]

Hi,

You can add this under Custom > Edit global CSS in the Customizer.

.x-colophon.top .widget_text .textwidget ul {
      margin: 0 0 1.313em 0;
}

.x-colophon.top ul.sitemap > li { 
      min-height:100%;
}

.x-colophon.top {
       padding: 20px 0;
}

Hope that helps.

[yhshin1020]

This reply has been marked as private.

[Paul R]

Hi,

You can add this in Custom > Edit Global Css in the cutomizer.

.x-colophon.top ul.sitemap {
   text-align:center;
}

.x-colophon.top ul.sitemap > li {
    display: inline-block;   
    float: none;
    vertical-align: top;
    text-align: left;
}

Hope that helps

[yhshin1020]

This reply has been marked as private.

[Jade]

Hi there,

Do you mean you want to align the menu items on the footer to the right instead of centered?

If so, please add this code in the customizer:

.x-colophon.top ul.sitemap > li {
    float: right;
}

[yhshin1020]

This reply has been marked as private.

[yhshin1020]

This reply has been marked as private.

[Christopher]

Hi there,

Please update your code in footer 1 widget area to :

<div class="x-column x-1-6 x-sm"><img src="add image URL here"><br><div class="x-social-global"><a href="#holder" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a><a href="#holder" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="" aria-hidden="true"></i></a><a href="#holder" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="" aria-hidden="true"></i></a><a href="#holder" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon="" aria-hidden="true"></i></a><a href="#holder" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon="" aria-hidden="true"></i></a><a href="#holder" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon="" aria-hidden="true"></i></a><a href="#holder" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon="" aria-hidden="true"></i></a></div></div>

<div class ="x-column x-5-6 x-sm"><ul class="sitemap">
...
</ul></div>

Hope it helps.

[yhshin1020]

This reply has been marked as private.

[Christopher]

Hi there,

Please update your code to the following :

<div class="x-column x-1-5 x-sm">content</div>
<div class="x-column x-1-5 x-sm">content</div>
<div class="x-column x-1-5 x-sm">content</div>
<div class="x-column x-1-5 x-sm">content</div>
<div class="x-column x-1-5 x-sm">content</div>

This way you’ll have five columns and you can manage your content better.
Feel free to change columns width.

Hope it helps.

[yhshin1020]

This reply has been marked as private.

[Author]

Posts