[KindredBayParticipant]

Hello,

1. I made a burger mobile menu button in code pen with html/css/js and have been trying to think of how to add it instead of the one that comes default in the x icon theme?
My code pen button here: http://codepen.io/anon/pen/LNNaYp
My website: kindredbay.co.uk

2. How would i change the mobile drop down menu like your website “http://theme.co/x/”?

3. How would i switch my logo to a different one when the website is open ipad/mobile?

4. How can i make my nav bar fixed on mobile, ive tried adding “postion:fixed” to the nav to no avail it looks broken?

Thank you in advance.

[LelyModerator]

Hi There,

Thanks for posting in.

1.) Unfortunately, changing the menu button structure is not recommended.If you wish to implement this, I can point you to the template where mobile menus is. It’s on wp-content/themes/x/framework/views/global/_nav-primary.php. Copy that file on the same folder on the child theme wp-content/themes/x-child/framework/views/global/_nav-primary.php. Then change this line of code:
<i class="x-icon-bars" data-x-icon=""></i>
With your HTML structure from the codepen.
Then you can add the CSS on Appearance > Customize > Custom > CSS. The javascript can be added on
Appearance > Customize > Custom > Javascript.
Please note that any issue that comes up from customization is beyond the scope of our support.

FOR #2 #3 and #4
Please add the following CSS on Appearance > Customize > Custom > CSS:

@media (max-width: 979px){
.x-navbar .mobile .x-nav li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav .x-active > a, .x-navbar .mobile .x-nav .current-menu-item > a { /*#2*/
    text-align: center;
    border: none;
    padding: 0.3em 0.65em;
}
a.x-brand.img img {
    opacity: 0;
}
a.x-brand.img {
    background: url('http://kindredbay.co.uk/wp-content/uploads/2016/03/logoonlywhite.png') center no-repeat;
    background-size: contain;
}
.x-navbar { /* For #4 Fixed nav on mobile*/
    position: fixed;
    width: 100%;
}
}

Change the URL to your preferred logo for mobile/ipad

Hope this helps.

[Author]

Posts