Icon Menu to not stack in Mobile Mode

Hey,
Try adding this to your custom css box in Theme Options > Advanced Settings:

.home .tcol-lg-3 {
    width: 25%;
    float: left;
}

Hope it helps!

Hannah

Hi Hannah,

Unfortunately it did not work. The icon images are still stacking.

I’m not seeing the css in your code. Did you remove it already? Try changing it to this:

.home .tcol-lg-3 {
    width: 25% !important;
    float: left;
}

Does that change anything?

Hannah

Yes, I removed it and replaced with the code above. It did not change anything.

I still am not seeing the code in your css. Can you tell me what else you’ve added? Have you also tried clearing your cache?

Hannah

Oh that’s strange. I’ve added quite a lot under the “Advanced Settings” option. Please view below:

/*TOP BAR EDITS*/

.kad-topbar-left {
width:100%
}
.topbarmenu ul {
text-align: right;
}
.topbarmenu ul li{
float: none;
display: inline-block;
padding-top: 5px;
}

.topbarmenu ul li a {
padding: 2px;
}

.sliderclass {
padding: 0;
}

.home-padding {
padding: 0px 0 0px;
}

.contentclass {
padding-top: 10

}
.page-header {
margin: 0;
padding: 0;
}

.footer-widget .widget, .footer-widget {
margin-top:0;
}
#containerfooter {
padding-top: 0;
}
.footercredits {
padding-top: 0;
padding-bottom: 0;
}

.page-header {display:none;}

#nav-main ul.sf-menu ul li a, #nav-second ul.sf-menu ul li a {
width: auto;
display: block;
padding: 10px;
color: #555;
text-align: left;
font-size: 18px;
}

hr {
border: 0;
width: 100%;
color: #5d5d5e;
background-color: #5d5d5e;
height: 2px;}

/*CHANGE NAVIGATION TABS*/

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
color:#fff;
background: #0e4e96;
}

.nav-tabs>li>a {
font-size: 1.4rem;
font-weight: bold;
}

.nav-tabs> li > a:hover, .x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
color: #f36f21;
background: none;
}

/*FONT COLOR OF ACCORDION TEXT*/
.panel-heading h5 {
color:#115fb6;
font-weight: bold;
}

/*ICON ON HOMEPAGE*/

.home-iconmenu a h4 {color:#000000;} /*Title Color*/
.home-iconmenu a p {color:#5d5d5d; font-weight: bold;} /*main text color*/
.home-iconmenu a:hover p {color:#000000;}
.home-iconmenu a {background:transparent;}
.home-iconmenu a {background:#fff;}
.home-iconmenu a:hover {background: #dddddd;} /*background on hover color*/

/*MAKES IMAGE FULL WIDTH IN ICONS*/
.home-iconmenu a {
background: transparent !important;
padding: 0px 0px 10px;
color: #444;
}

/*ACCORDION BORDER COLOR*/
.panel.panel-default {
margin-bottom: 2px;
border: 0px solid #000;
}
.panel-heading .accordion-toggle {
border-color: #000;
}
.panel-body {
border-top: 0px solid #000;
}
.panel-heading .accordion-toggle.collapsed {
border-left: 0px solid #000;
}

/*CHANGE BACKGROUND COLOR ON ONLINE APPLICATION PAGE*/
body.page-id-367 .contentclass {
background:#e8e8e8;
}

.page-id-1199 #nav-main{
display:none;
}

/*DIV STYLE FOR GRAY BACKGROUND ON INT STD PAGE*/
.int-02 {
background-color: #f3f3f3}
height: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
}

.home .tcol-lg-3 {
width: 25% !important;
float: left;
}

You have an error at the end of your css:

.int-02 {
background-color: #f3f3f3}
    height: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

Should be:

.int-02 {
    background-color: #f3f3f3;
    height: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

Kadence Themes

Great that worked perfectly! Also is there a way I can make the Title Text ABOVE the icon menu image?

Thanks again.

Hey,
The title above isn’t an option with this.

Kadence Themes