{"id":629,"date":"2020-07-27T14:02:53","date_gmt":"2020-07-27T13:02:53","guid":{"rendered":"https:\/\/www.graphicz.co.uk\/blog\/?p=629"},"modified":"2020-07-28T07:59:22","modified_gmt":"2020-07-28T06:59:22","slug":"an-alternative-mobile-header-area-for-sellerdeck-swift-design","status":"publish","type":"post","link":"https:\/\/www.graphicz.co.uk\/blog\/an-alternative-mobile-header-area-for-sellerdeck-swift-design\/","title":{"rendered":"An Alternative Mobile Header Area for Sellerdeck Swift Design"},"content":{"rendered":"\n

In Sellerdeck Swift<\/strong>, the mobile header area looks like this:

<\/p>\n\n\n\n

\"Swift<\/figure>\n\n\n\n

However, on occasions, you may, for reasons of logo style and design or whatever, prefer it if the header looked like this:
<\/p>\n\n\n\n

\"Swift<\/figure>\n\n\n\n

Take a snapshot just in case…

In UXHeadCode Swift after:<\/p>\n\n\n\n

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

Remove the following code at around line 142:<\/p>\n\n\n\n
<div class=\"logo-area text-center d-flex align-items-center justify-content-center\">\n<span class=\"large-logo\">\n<actinic:variable name=\"LogoLayout\" \/>\n<\/span>\n<span class=\"small-logo\">\n<actinic:variable name=\"CompanyLogoImage\" \/>\n<\/span>\n<\/div><\/pre>\n\n\n\n
and paste after:<\/p>\n\n\n\n
<div class=\"row align-items-center justify-content-between flex-nowrap\"><\/pre>\n\n\n\n
You are left with:<\/p>\n\n\n\n
<\/div>\n\n\n\n<div class=\"d-flex\"><\/pre>\n\n\n\n
delete that.

Copy:<\/p>\n\n\n\n
<div class=\"row align-items-center justify-content-between flex-nowrap\"><\/pre>\n\n\n\n
and replace (the other):<\/p>\n\n\n\n
<div class=\"d-flex\"><\/pre>\n\n\n\n
with:<\/p>\n\n\n\n
<\/div>\n<div class=\"row align-items-center justify-content-between flex-nowrap\"><\/pre>\n\n\n\n
Before Applying go to the bottom and remove one of these <\/div>s:<\/p>\n\n\n\n
<\/form>\n<\/div>\n<\/div>\n<\/div><\/pre>\n\n\n\n
add to the stylesheet::<\/p>\n\n\n\n
.mobile-header .align-items-center .logo-area {\nmargin: 0 auto 0.5em auto;\n}\n@media (max-width:767px) {\n.dropdown-toggle.useicon {\nborder: 1px solid transparent!Important;\nposition: relative;\n}\n.dropdown-toggle.useicon:before {\nfont-size: 20px;\ncolor:<actinic:variable name=\"megaMenuBGColor\" \/>;\nposition: absolute;\nfont-family: 'FontAwesome';\ntop: -2px;\nleft: 10px;\ncontent: \"\\f007\";\n}\n.dropdown-toggle.useicon:hover:before {\nopacity:.8;\n}\n}\na.header-icon-link, a.header-icon-link i {color:<actinic:variable name=\"megaMenuBGColor\" \/>;}\na.header-icon-link:hover, a.header-icon-link:hover i, a.header-icon-link i:hover {opacity:.8;}<\/pre>\n\n\n\n
After the phone section::<\/p>\n\n\n\n
<div class=\"mobile-margin mobile-phone d-flex align-items-center justify-content-center\">\n<a class=\"header-icon-link\" href=\"tel:<actinic:variable name=\"Phone\" \/>\">\n<img src=\"phone-icon-xs.png\" alt=\"\">\n<\/a>\n<\/div><\/pre>\n\n\n\n
Add this::<\/p>\n\n\n\n
<div class=\"mobile-margin mobile-profile\">\n<Actinic:NOTINB2B>\n<a href=\"<actinic:variable name=\"LoginPageURL\" \/>\" class=\"header-icon-link\"><i class=\"fa fa-user\" aria-hidden=\"true\"><\/i><\/a>\n<\/Actinic:NOTINB2B>\n<Actinic:NOTINB2B style=\"display:none\"><div style=\"display:none\"><\/Actinic:NOTINB2B>\n<actinic:variable name=\"B2B_Links\" \/>\n<Actinic:NOTINB2B><\/div><\/Actinic:NOTINB2B>\n<\/div><\/pre>\n\n\n\n
Open Layout Code B2B links and add ‘useicon’ after <button type=”button” class=”dropdown-toggle

so it looks like::<\/p>\n\n\n\n
<button type=\"button\" class=\"dropdown-toggle useicon no-button dropdown-menu-right\" data-toggle=\"dropdown\"><\/pre>\n\n\n\n
Publish to web and test.<\/p>\n\n\n\n
Example site: https:\/\/www.graphicz.solutions\/althead\/<\/a>

(Posted without warranty express or implied<\/em>)<\/p>\n","protected":false},"excerpt":{"rendered":"
In Sellerdeck Swift, the mobile header area looks like this: However, on occasions, 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…<\/span> <\/p>\n
Read more ›<\/b><\/div>\n
<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-629","post","type-post","status-publish","format-standard","hentry","category-graphicz-articles"],"_links":{"self":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/629"}],"collection":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=629"}],"version-history":[{"count":3,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/629\/revisions"}],"predecessor-version":[{"id":637,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/629\/revisions\/637"}],"wp:attachment":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}