An Alternative Mobile Header Area for Sellerdeck Swift Design

Call 01323 872296

An Alternative Mobile Header Area for Sellerdeck Swift Design

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

Swift Design Head Area

However, on occasions, 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:

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

add the following

<link rel="stylesheet" href="">

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 class="small-logo">
<actinic:variable name="CompanyLogoImage" />

and paste after:

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

You are left with:


<div class="d-flex">

delete that.


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

and replace (the other):

<div class="d-flex">


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

Before Applying go to the bottom and remove one of these </div>s:


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 {
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="">

Add this::

<div class="mobile-margin mobile-profile">
<a href="<actinic:variable name="LoginPageURL" />" class="header-icon-link"><i class="fa fa-user" aria-hidden="true"></i></a>
<Actinic:NOTINB2B style="display:none"><div style="display:none"></Actinic:NOTINB2B>
<actinic:variable name="B2B_Links" />

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:

(Posted without warranty express or implied)

Keep in touch and share

Graphicz on Social Media

01323 872296. 07836 551000.

Website by Graphicz