Announcement

Collapse
No announcement yet.

An Alternative Mobile Header Area for Swift

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    An Alternative Mobile Header Area for Swift

    In Sellerdeck Swift, the mobile header area looks like this:


    Swift Design Head Area

    However, on occassions, you may, for reasons of logo style and design or whatever, prefer it if the header looked like this:

    Swift Design Alternative Head


    Take a snapshot just in case...

    In UXHeadCode Swift after:
    Code:
    <link href="actinic.css" rel="stylesheet" type="text/css">
    add the following
    Code:
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    In UXHeader Swift around line 126:
    Look for the line
    Code:
    <div class="mobile-header container">
    we will be working below that:

    Remove the following code at around line 142:

    Code:
    <div class="logo-area text-center d-flex align-items-center justify-content-center">
    <span class="large-logo">
    <actinic:variable name="LogoLayout" />
    </span>
    <span class="small-logo">
    <actinic:variable name="CompanyLogoImage" />
    </span>
    </div>
    and paste after
    Code:
    <div class="row align-items-center justify-content-between flex-nowrap">
    You are left with:

    Code:
    </div>
    
    
    
    <div class="d-flex">
    delete that.



    copy
    Code:
    <div class="row align-items-center justify-content-between flex-nowrap">
    and replace (the other)

    Code:
    <div class="d-flex">
    with

    Code:
    </div>
    <div class="row align-items-center justify-content-between flex-nowrap">
    Before Applying go to the bottom and remove one of these </div>s

    Code:
    </form>
    </div>
    </div>
    </div>
    add to the stylesheet:

    Code:
    .mobile-header .align-items-center .logo-area {
    margin: 0 auto 0.5em auto;
    }
    @media (max-width:767px) {
    .dropdown-toggle.useicon {
    border: 1px solid transparent!Important;
    position: relative;
    }
    .dropdown-toggle.useicon:before {
    font-size: 20px;
    color:<actinic:variable name="megaMenuBGColor" />;
    position: absolute;
    font-family: 'FontAwesome';
    top: -2px;
    left: 10px;
    content: "\f007";
    }
    .dropdown-toggle.useicon:hover:before {
    opacity:.8;
    }
    }
    a.header-icon-link, a.header-icon-link i {color:<actinic:variable name="megaMenuBGColor" />;}
    a.header-icon-link:hover, a.header-icon-link:hover i, a.header-icon-link i:hover {opacity:.8;}

    After the phone section:
    Code:
    <div class="mobile-margin mobile-phone d-flex align-items-center justify-content-center">
    <a class="header-icon-link" href="tel:<actinic:variable name="Phone" />">
    <img src="phone-icon-xs.png" alt="">
    </a>
    </div>
    Add this:

    Code:
    <div class="mobile-margin mobile-profile">
    <Actinic:NOTINB2B>
    <a href="<actinic:variable name="LoginPageURL" />" class="header-icon-link"><i class="fa fa-user" aria-hidden="true"></i></a>
    </Actinic:NOTINB2B>
    <Actinic:NOTINB2B style="display:none"><div style="display:none"></Actinic:NOTINB2B>
    <actinic:variable name="B2B_Links" />
    <Actinic:NOTINB2B></div></Actinic:NOTINB2B>
    </div>
    Open Layout Code B2B links and add 'useicon' after <button type="button" class="dropdown-toggle

    so it looks like:
    Code:
    <button type="button" class="dropdown-toggle useicon no-button dropdown-menu-right" data-toggle="dropdown">
    Publish to web and test.

    Example site:
    https://www.graphicz.solutions/althead/

    (Posted without warranty express or implied)
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

    #2
    Jonathan, regarding an email I received today.

    All the thanks are mine to give, you and Norman have helped me so much, even when you don’t know it.
    Regards

    Jason
    Silver Jewellery from Tianguis Jackson and Geti Titanium Rings
    Titan Jewellery Men's Titanium Wedding Rings and Tungsten Wedding Rings
    Titanium Jewellery

    Comment


      #3
      Much appreciated Jason, thank you.
      Jonathan Chappell
      Website Designer
      SellerDeck Website Designer
      Actinic to SellerDeck upgrades
      Graphicz Limited - www.graphicz.co.uk

      Comment

      Working...
      X