An Alternative Mobile Header Area for Swift

[graphicz]

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




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




Take a snapshot just in case...

In UXHeadCode Swift after:

<link href="actinic.css" rel="stylesheet" type="text/css">

add the following

<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

<div class="mobile-header container">

we will be working below that:

Remove the following code at around line 142:

<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

<div class="row align-items-center justify-content-between flex-nowrap">

You are left with:

</div>



<div class="d-flex">

delete that.



copy

<div class="row align-items-center justify-content-between flex-nowrap">

and replace (the other)

<div class="d-flex">

with

</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

</form>
</div>
</div>
</div>

add to the stylesheet:

.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:

<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:

<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:

<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)

[Buzby]

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.

[graphicz]

Much appreciated Jason, thank you.