Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1206560

    Thanks for the theme support!

    I’ve researched but haven’t found a way to place the social container far left on the screen. See screen shot in Private

    My menu and header settings are as follows:
    Logo left, menu right
    Header social icons = Display in main header area
    No phone and no secondary menu

    My logo & burger Quick CSS:

    html {
    background-color: #f4f4f4 !important;
    }
    .logo img {
    padding: 3px 0 3px 0;
    }
    /* Remove image overlay with circle and arrow */
    .image-overlay {
    display: none !important;
    opacity: 0 !important;
    }
    
    /* Activate burger menu */
     @media only screen and (max-width: 2500px) {
    #top #header .av-main-nav > li.menu-item  {
        display: none!important;
    }
    #top #header .av-burger-menu-main {
        cursor: pointer;
        display: block!important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    }}
    #top #header_main .logo {
       left: 50%;
        margin-left: -125px;
    }
    .av_promobox .avia-button {
    position: relative;
    margin-top: 10px!important;
    }
    .avia-promocontent { margin-right: 0; 
    }
    .main_color strong {
    font-weight: bold;
    color: #444;
    }
    .av-share-box-list {
        border: none!important;
    }
    h5.av-share-link-description {
        text-align: center;
    }
    .av-share-box ul li {
        border: none;
    }
    
    .av-share-box ul { width: 50%; }
    .av-share-box .av-share-link-description { display: none; }
    .av-share-box ul li a { color: #109bc5!important; background-color: white!important; }
    .av-share-box ul li a:hover { color: #666!important; background-color: white!important; }
    .av-share-box-list, .av-share-box ul li {
        border: 0 !important;
    }
    h4, h5  {font-family: sans-serif !important;
    }
    h5  {
    font-weight: 600 !important;
    font-size: 14px;
    }
    .widgettitle {
      font-family: sans-serif !important;
    font-size: 16px !important;
    color: #0b5c73 !important;
    }
    #footer .widget li {
      font-size:14px !important;
    }
    
    .sidebar a, .sidebar a > strong {
         color: #109bc5 !important;
    }
    
    .sidebar a:hover, .sidebar a>strong:hover {
         color: #109bc5 !important;
    }
    @media only screen and (max-width: 767px) {
    .responsive #scroll-top-link {
    display: block !important;
    .responsive .mobile_slide_out .logo {
    margin-left: 35%;
    .html_av-overlay-side .av-burger-overlay-scroll {
    width: 70% !important;
    }}
    • This topic was modified 2 months, 1 week ago by  welswebmaster. Reason: Updated CSS
    #1206871

    Hey Julie,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    #1207305

    Hi Victoria,
    The URL of the domain (same as attachment) is in the Private Data field.

    #1208269

    I’d like to hide the logo totally on mobile. (Its in the menu and footer already) How do I do that?

    #1208409

    Hi,

    Hide the logo with the following:

    @media only screen and (max-width: 767px){
    .responsive .logo img {
        display:none!important;
    }}

    Best regards,
    Jordan Shannon

    #1208505

    Thanks, Jordan for the CSS to hide the logo. What about how to position the social icons to the left side of the logo – just for desktop view? Right now they are hidden for tablet and mobile which is fine.

    #1208547

    Hi,

    Add this to quick css:

    @media (min-width: 1281px) {
    .main_menu{
        position: absolute!important;
        left: 0!important;
    }
    
    
    .av-hamburger{
        position: absolute!important;
        float: right!important;
        left: 75vw!important;
    }}
    
    
    @media (min-width: 1025px) and (max-width: 1280px) {
    .main_menu{
        position: absolute!important;
        left: 0!important;
    }
    
    .av-hamburger{
        position: absolute!important;
        float: right!important;
        left: 75vw!important;
    }}

    Best regards,
    Jordan Shannon

    #1208575

    Hi Jordan,
    Oh so close! There is an invisible YET clickable burger menu far left. If you hover over top far left of the social icons (which are getting bumped right because of it, you can click and it opens the burger menu on the right.

    Click left burger which is invisible, and it opens right top burger visible.
    Fix?

    #1208578

    Hi,

    I see adjust the code to this:

    @media (min-width: 1281px) {
    .main_menu{
        position: absolute!important;
        left: 0!important;
    }
    .av-hamburger{
        position: absolute!important;
        float: right!important;
        left: 75vw!important;
    }
    .avia-menu.av-main-nav-wrap.av_menu_icon_beside{
        position: absolute!important;
        float: right!important;
        left:0 !important;
    }}
    
    
    @media (min-width: 1025px) and (max-width: 1280px) {
    .main_menu{
        position: absolute!important;
        left: 0!important;
    }
    .av-hamburger{
        position: absolute!important;
        float: right!important;
        left: 75vw!important;
    }
    .avia-menu.av-main-nav-wrap.av_menu_icon_beside{
        position: absolute!important;
        float: right!important;
        left:0 !important;
    }}

    Best regards,
    Jordan Shannon

    #1208583

    Jordan,
    That worked. Beautiful! Thanks for the speedy response too!

    #1208598

    Hi,

    Perfect! If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

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

You must be logged in to reply to this topic.