Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #981151
    #981424

    Hey mynoxin,

    1. Please try the following in Quick CSS under Enfold->General Styling:

    .html_visible_cart.html_stretched.html_header_top.html_header_stretch .main_menu {
        right: auto !important;
        left: 350px;
    }

    2. You can set a different font for your menu under Enfold->Advanced Styling.

    Best regards,
    Rikard

    #981575

    works, thanks ;)

    could you give me an code to center the menu?
    sry, for so many edits.

    • This reply was modified 2 years, 3 months ago by  mynoxin.
    #981898

    Hi,

    I’m not sure what you mean by center the menu? Could you post a screenshot highlighting your intentions maybe?

    Best regards,
    Rikard

    #982048

    Hey Rikard,

    at the moment, the menu floats on the left side. I want to have it centered on the header. What is the Code to do that?
    I don’t know, how to show it on a screenshot?!

    Kind regards,
    Christian

    #982425

    Hi,

    To center the logo and menu please remove the previous code and add the below CSS:

    NOTE: The code works for both text and Icon menu. To activate the Icon menu go to Enfold > Main Menu > General > Menu Items for Desktop

    CSS:

    /************************************
    
    Centered menu widget and logo
    
    *************************************
    
    
    CSS Settings:
    
    » Initiate Flexbox
    » Topbar
    » Header
    » Logo
    » Menu
    » Widget
    » Social icons
    » Search
    » Cart icon
    
    ***********************************/ 
    
    
    
    /*--------------------------------
    
    » Initiate Flexbox
    
    --------------------------------*/
    
    
    
    /* Header */
    .responsive #top #header,
    /* Top bar */
    .responsive #top #header #header_meta,
    /* Search icon */
    .responsive #top #header #menu-item-search a,
    /* Cart icon */
    .responsive #top #header a.cart_dropdown_link,
    /* Social icon */
    .responsive #top #header #header_main nav .social_bookmarks,
    /* Logo */
    .responsive #top #header #header_main .inner-container .logo,
    /* Main menu, cart and social icons */
    .responsive #top #header #header_main .inner-container .main_menu,
    /* Widgets */
    .responsive #top #header #header_main .inner-container .widget:nth-child(3),
    /* Header inner container */
    #top #header #header_main .container.av-logo-container .inner-container {    
        display: flex;
        position: relative;
    }
    
    
    
    
    /*--------------------------------
    
    » Topbar
    
    --------------------------------*/
    
    
    
    /* Top bar */
    
    .responsive #top #header #header_meta {
        flex-basis: 100%;    
    }
    
    
    
    /*--------------------------------
    
    » Header
    
    --------------------------------*/
    
    /* Height */
    
    #top #header #header_main .container.av-logo-container {
        height: inherit;   /* Auto height: Header takes the height of the contents */
    }
    
    
    /* Header inner container */
    
    #top #header #header_main .container.av-logo-container .inner-container {
      height: inherit; 
      position: relative !important;
      flex-wrap: wrap;
      justify-content: center;
    }
    
    
    /* Wrappers 
    --------------------------------*/
    
    /* Header content and Topbar */
    
    .responsive #top #header {
        flex-wrap: wrap;
    }
    
    /* Header contents: Logo, Menu, Social Icons and Widgets. */
    
    .responsive #top #header #header_main {
        flex-basis: 100%;    
    }
    
    /* Transparent header 
    --------------------------------*/
    
    .responsive.html_header_transparency #top #wrap_all #header {
        position: absolute;
    }
    
    
    /* Main content: 
    -----------------------*/
    
    .responsive #top #main { 
        padding-top: 0px; /* Gap between the content and header */
    } 
    
    
    /* Fixed header 
    --------------------------------*/
    
    /* Fixed header */
    
    .html_header_sticky.html_header_transparency #top #wrap_all #header,
    .html_header_sticky #top #wrap_all #header { 
        position: fixed; 
    } 
    
    
    /* Fixed header and page content gap. 
       Padding value should be same as the fixed header height. */
    
    .html_header_sticky:not(.html_header_transparency) #top #wrap_all #main { 
        /*padding-top: 145px !important; */
    } 
    
    @media only screen and (max-width: 767px) {
    .html_header_sticky #top #wrap_all #main {
        /*padding-top: 145px !important; */
    }}
    
    
    
    
    
    /*--------------------------------
    
    » Logo
    
    --------------------------------*/
    
    
    
    /* Logo */
    
    .responsive #top #header #header_main .inner-container .logo {
       order: 1;
       flex-basis: auto;
       /*width: auto;*/
       min-width: 80px; /* Minimum width of the logo in small screens */
       z-index: 1;
    }
    
    /* Logo image size */
    .responsive #top #header .logo,
    .responsive #top #header .logo a,
    .responsive #top #header .logo img { /* Logo Width and alignment */
        width: auto;         
        max-width:200px;  /* Logo width: (auto | 100% | px );  Set auto to display the uploaded image size. Select full size in media library */
        height: auto; /* Height specification is not required. It is proportional to the max width of the logo */
        align-items: center;
        align-self: center;
    }
    
    /* center transparency logo */
     .responsive #top #header .logo span img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    } 
    
    
    /*--------------------------------
    
    » Menu
    
    --------------------------------*/
    
    
    
    /* Menu outer container: Menu with siblings cart and social icons */
    
    .responsive #top #header #header_main .inner-container .main_menu {
        order: 1;
        flex-basis: auto;   /* Use calc to minus the width of the logo */
        align-items: center;
        align-self: center;
    }
    
    /* Navigation */
    
    #header .av-main-nav {
        display: flex;
        flex-wrap: nowrap;
    }
    
    /*  Activate burger menu  */
    
    @media only screen and (max-width: 1000px) {
        #top #header .av-main-nav>li.menu-item {
            display: none!important;
        }
        #top #header .av-burger-menu-main {
            cursor: pointer;
            display: block!important;
        }
    }
    
    @media only screen and (max-width: 767px) {
    
    /* Mobile menu position fix */
    .responsive #top .av-logo-container .avia-menu {
        display: flex!important;
        align-items: center;
    }}
    
    /* Mega menu fix */
    #header li .avia_mega_div,
    #header li:hover .avia_mega_div {    
        right: auto!important;
        left: auto!important;
        max-width: 50vw;
    }
    
    /*--------------------------------
    
    » Widget
    
    --------------------------------*/
    
    
    /* Widgets */
    
    .responsive #top #header #header_main .inner-container .widget {
        order: 2;
        flex-basis: auto;
        padding: unset;
        clear: none!important;
    
        align-self: center;
        align-items: center;
        z-index: 1;
        max-width: 200px;
    }
    
    .responsive #top #header #header_main .inner-container .widget > div {
        display: flex;
        align-items: center;
    
        width: 100%;
        line-height: 14px;
        padding:0 10px;
    }
    
    
    
    
    
    /*--------------------------------
    
    » Social icons
    
    --------------------------------*/
    
    
    
    
    /* Flex support and position fix */
    .responsive #top #header #header_main nav .social_bookmarks {
        display: flex;
         top: auto;
         margin-top: 0;
         align-items: center;
    }
    /* Inherit height for flex alignment */
    #top .av-logo-container .social_bookmarks li {
        height: inherit;
    }
    
    
    
    
    /*--------------------------------
    
    » Search 
    
    --------------------------------*/
    
    
    
    /* Your styles here */
    
    
    
    /*--------------------------------
    
    » Cart 
    
    --------------------------------*/
    
    
    
    @media only screen and (max-width: 767px) {
    .responsive #top #menu-item-shop.cart_dropdown {
        display: flex;
        align-items: center;
    }
    .cart_dropdown .dropdown_widget .avia-arrow {
        display: none;
    }}
    

    Best regards,
    Vinay

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.