Okay
  Public Ticket #2959174
Equal columns, header padding and menu items in footer
Closed

Comments

  •  2
    Revisemarketing started the conversation
    January 17, 2022 at 12:33am

    Hello!

    I have a couple questions I hope someone can help me with:

    1. Is it possible to set my columns with fancy boxes to equal heights? So that the heights are always equal, no matter what screen size? Now they are different sizes (see screenshot).

    2. I want less padding on the top and bottom of my logo/menu items in the Top Navigation Menu. I want it as small as the menu is while scrolling through the page. Is it possible to make the header smaller without changing the size of the logo? 

    3. I want arrows (>) before my menu items in the footer. I've added these in the Salient Menu Item Options, and then added the menu to the footer widget. But the arrows won't show here. What can I do to make sure the arrows are visible.

    Thanks in advance! :) 

    Mathilde

  •  2,958
    Andrew replied
    January 17, 2022 at 5:54am

    Hello Mathilde,

    Use the following CSS.

    .material .nectar-fancy-box[data-style=color_box_basic], .material .nectar-fancy-box[data-style=color_box_hover] .box-inner-wrap, .material .nectar-fancy-box[data-style=color_box_hover] {
    height: 460px;
}
#header-outer #logo {
    margin: 12px 0;
}
.material #footer-outer #footer-widgets .col ul.menu li:before {
    content: ">";
}
.material #footer-outer #footer-widgets .col ul.menu li a{
    display:inline-block;
    padding-left: 5px !important;
}

    Regards,

  •   Revisemarketing replied privately
  •  8,839
    Tahir replied
    January 24, 2022 at 6:14am

    Hey Again,

    You can add an Extra Class to the Row and then add that to the CSS selector so the CSS only applies to that specific Row.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .extra-class .nectar-fancy-box[data-style=color_box_basic],.extra-class .nectar-fancy-box[data-style=color_box_hover] .box-inner-wrap, .extra-class .nectar-fancy-box[data-style=color_box_hover] {
    height: 460px;
}

    Thanks



    ThemeNectar Support Team