Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 27, 2018 at 12:02 am #918103
    rutledgeim

    I’ve searched your forum and can’t quite figure out how to center the “Small bar above Main Menu” element.
    I’d also like to make the “Small bar above Main Menu” dropdown list items’ font a bit smaller.
    Please help!

    February 27, 2018 at 12:48 am #918113
    Jordan Shannon

    Hey Scott,

    Add this to quick css:

    
<pre><code>#top .sub_menu>ul {
    margin: 0 auto!important;
    text-align: center!important;
    margin-left: 230px!important;
}

#top #header_meta a{
font-size:14px!important;
}

    Best regards,
    Jordan Shannon

    February 27, 2018 at 7:29 pm #918606
    rutledgeim

    Hi Jordan, thanks for your quick response!

    This CSS didn’t quite work. The top menu was off center on desktop and wasn’t centered at all on mobile.
    Also, I’d like to keep the top menu font at 18px and have the top menu dropdown list items be 12px.

    Thanks again.

    February 28, 2018 at 4:38 pm #919156
    Vinay

    Hi,

    Please replace the code with the below one to center the top menu and change the font size for the sub menu items :)

    #top .av_secondary_left .sub_menu {
    padding-right: 0px;
    left: 50%;
    transform: translateX(-50%);
}

#top #header_meta nav ul ul a, 
#top #header_meta nav ul ul {
    font-size: 12px!important;
}

    Best regards,
    Vinay

    February 28, 2018 at 9:14 pm #919281
    rutledgeim

    Now the top menu is centered on desktop and tablet size, but not on the mobile size.

    February 28, 2018 at 10:07 pm #919288
    Jordan Shannon

    Hi,

    Try adding the following to quick css as well:

    @media only screen and (max-width: 767px){
 #avia2-menu.menu{
position:relative!important;
}}

    Best regards,
    Jordan Shannon

    February 28, 2018 at 11:25 pm #919319
    rutledgeim

    The top menu still isn’t centered on mobile.

    March 1, 2018 at 8:38 am #919459
    Rikard

    Hi,

    Please try this CSS as well:

    @media only screen and (max-width: 767px) {
#top .av_secondary_left .sub_menu {
    left: 0 !important;
    transform: translateX(0%) !important;
}
}

    Best regards,
    Rikard

    March 2, 2018 at 12:41 am #920036
    rutledgeim

    That worked!
    Thanks for your time.

    March 2, 2018 at 7:18 am #920113
    Vinay

    Hi,

    Glad we could help!
    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Center "Small bar above Main Menu" element’ is closed to new replies.