- This topic has 12 replies, 2 voices, and was last updated 5 years, 7 months ago by
.
Hi there,
I have a question about the footer. As I can see there is no other possibility to change the footer menu from vertical to horizontal. So i tried some code but it didn’ work.
I tried this here:
<pre class=”prettyprint prettyprinted”><span class=”com”>/* Horizontal Footer Menu */</span><span class=”com”>#footer-widgets .widget.widget_nav_menu {</span><span class=”pln”>
width</span><span class=”pun”>:</span> <span class=”lit”>100</span><span class=”pun”>%;</span>
<span class=”pun”>}</span><span class=”com”>#footer-widgets .widget.widget_nav_menu ul {</span><span class=”pln”>
text</span><span class=”pun”>-</span><span class=”pln”>align</span><span class=”pun”>:</span><span class=”pln”> center</span><span class=”pun”>;</span>
<span class=”pun”>}</span><span class=”com”>#footer-widgets .widget.widget_nav_menu li {</span><span class=”pln”>
display</span><span class=”pun”>:</span> <span class=”kwd”>inline</span><span class=”pun”>-</span><span class=”pln”>block</span><span class=”pun”>;</span>
<span class=”kwd”>float</span><span class=”pun”>:</span><span class=”pln”> none</span><span class=”pun”>;</span><span class=”pln”>
margin</span><span class=”pun”>-</span><span class=”pln”>right</span><span class=”pun”>:</span> <span class=”lit”>16px</span><span class=”pun”>;</span>
<span class=”pun”>}</span><span class=”com”>#footer-widgets .widget.widget_nav_menu li:before {</span><span class=”pln”>
content</span><span class=”pun”>:</span> <span class=”str”>”\007C”</span><span class=”pun”>;</span><span class=”pln”>
font</span><span class=”pun”>-</span><span class=”pln”>family</span><span class=”pun”>:</span> <span class=”typ”>FontAwesome</span><span class=”pun”>;</span><span class=”pln”>
margin</span><span class=”pun”>-</span><span class=”pln”>right</span><span class=”pun”>:</span> <span class=”lit”>16px</span><span class=”pun”>;</span>
<span class=”pun”>}</span><span class=”com”>#footer-widgets .widget.widget_nav_menu li:first-of-type:before {</span><span class=”pln”>
content</span><span class=”pun”>:</span><span class=”pln”> none</span><span class=”pun”>;</span><span class=”pln”>
margin</span><span class=”pun”>-</span><span class=”pln”>right</span><span class=”pun”>:</span> <span class=”lit”>0</span><span class=”pun”>;</span>
<span class=”pun”>}</span><span class=”com”>#footer-widgets .widget.widget_nav_menu li:last-of-type {</span><span class=”pln”>
margin</span><span class=”pun”>-</span><span class=”pln”>right</span><span class=”pun”>:</span> <span class=”lit”>0</span><span class=”pun”>;</span>
<span class=”pun”>}</span>
Thank you in advance,Ivan
/* Horizontal Footer Menu */
#footer-widgets .widget.widget_nav_menu {
width: 100%;
}#footer-widgets .widget.widget_nav_menu ul {
text-align: center;
}#footer-widgets .widget.widget_nav_menu li {
display: inline-block;
float: none;
margin-right: 16px;
}#footer-widgets .widget.widget_nav_menu li:before {
content: “\007C”;
font-family: FontAwesome;
margin-right: 16px;
}#footer-widgets .widget.widget_nav_menu li:first-of-type:before {
content: none;
margin-right: 0;
}#footer-widgets .widget.widget_nav_menu li:last-of-type {
margin-right: 0;
}Sorry. This is better. Thanks!
Hi @MRD94,
I hope you are well today and thank you for your question.
Could you please share me your site URL where it’s displaying so that I can help you?
Best regards,
Shufflehound teamMy page url is https://watchdog.hr
Tell me when you are going to look into so that i turn the coming soon mode off or I can give you admin login if you need.
I cant make it happen to center the social icons and and i want the menus to be horizontal and without underlines.
Thanks
To access your shared site, could you please share me your site log in details privately by adding them in the box having text “Click here to share private content. Only you and forum moderators will be able to see it.”?
Of course there you go.
Solution for this topic
You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.sh-footer-widgets .widget_nav_menu li { border: 0; display: inline-block; padding: 0 5px; }Awesome that worked! Thanks a lot! Just another thing, you know why the social buttons didnt center like the other things ?
Solution for this topic
You can center align it using below custom CSS code.
.sh-footer-columns .widget-item .sh-social-widgets { display: table; margin: 0 auto; }Awesome thanks a lot! Just another question. What happens if I update my theme. Is the code going to be deleted automatically or will it be saved? Is this custom code section like the chevlin child theme part or not?
It will be preserved after theme update.
It is not part of child theme if you have added it in the below theme option.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
Alright thanks!
You are most welcome here 🙂
