Support Forum

If you want to show a shortcode in forum post - use [ instead of [ as you write it so you can see the shortcode 😉

We use and recommend UK2 for hosting - get a month free

Avatar

Please consider registering
guest

sp_LogInOut Log In sp_Registration Register

Register | Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed Topic RSS sp_TopicIcon
CSS for the hamburger menu
11th September 2020
7:42 pm
Avatar
Playas de Rosarito, Baja California, Mexico
Member
Members
Forum Posts: 141
Member Since:
9th July 2019
sp_UserOfflineSmall Offline

I appologize sir because I believe you have already answered this but I cant find the note.

What can I use to modify the styling of the hamburger menu in the app? Class, Id, element names?

I tried i {}, .fa {}, and .fa-bars {} and nothing seems to work.

I was hoping to be able to play with other size, color, and positioning options.

11th September 2020
8:25 pm
Avatar
Admin
Forum Posts: 934
Member Since:
4th March 2015
sp_UserOfflineSmall Offline

Here's the index.html
The hamburger is an svg icon in a class svg-icon

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="default-src * gap: file:; style-src 'self' 'unsafe-inline'; img-src * 'unsafe-inline' data:; script-src * 'unsafe-inline' 'unsafe-eval'">
<meta name="viewport" content="user-scalable=yes, initial-scale=1, width=device-width height=device-height" />
<title>Our Church</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="cordova.js"></script>
<script src="js/jQuery.js"></script>

</head>
<body data-spy="scroll" >
<style id="dynamicStyles"></style>
<div data-role="page" id="firstRun" class="ui-content hidden" style="display:none;">

<div id="rendered" >
<img src="img/logo-small.png" class="logo-small" style="margin:0 auto;"/>
<p><strong>Choose Language</strong></p>
<p>
<select class="tab-button" data-tab="#language" id="languageSelect">
<option value="en">English</option>';
</select>
</p>
<p><strong>Choose Church</strong></p>
<p><input type="text" name="church" id="church" placeholder="Church name"/></p>
<div id="church_url"></div>

</div>
</div>

<div data-role="page" id="page" class="ui-content hidden" style="display:none;">

<div data-role="header" id="header">
<h2 ><span id="menu" class="svg-icon" ><img src="img/menu.svg" /><span id="church" class="tab-button" data-tab="#home">Home</span></span> </h2>
<ul data-role="listview" class="menu ui-listview">
<li id="home-tab-button" class="tab-button" data-tab="#home"> <span class="languagespecificHTML" data-text="home">Home</span></li>
<li id="account-tab-button" class="tab-button" data-tab="#account" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="account">Account</span></li>
<li id="address-tab-button" class="tab-button" data-tab="#address" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="address">Address</span></li>
<li id="bible-tab-button" class="tab-button" data-tab="#bible" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="bible">Bible</span><span id="bible-badge"></span></li>
<li id="calendar-tab-button" class="tab-button" data-tab="#calendar" data-tap-toggle="false"><span class="languagespecificHTML" data-text="calendar">Calendar</span></li>
<li id="classes-tab-button" class="tab-button" data-tab="#classes" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="classes">Classes</span></li>
<li id="giving-tab-button" class="tab-button" data-tab="#giving" data-tap-toggle="false"><span class="languagespecificHTML" data-text="giving">Giving</span></li>
<li id="group-tab-button" class="tab-button" data-tab="#smallgroup" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="groups">Groups</span></li>
<li id="media-tab-button" class="tab-button" data-tab="#media" data-tap-toggle="false"><span class="languagespecificHTML" data-text="media">Media</span></li>
<li id="news-tab-button" class="tab-button" data-tab="#news" data-tap-toggle="false"><span class="languagespecificHTML" data-text="news">News</span> <span id="news-badge"></span></li>

<li id="prayer-tab-button" class="tab-button" data-tab="#prayer" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="prayer">Prayer</span> <span id="prayer-badge"></span></li>
<li id="rota-tab-button" class="tab-button" data-tab="#rota" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="rotas">Rotas</span></li>
<li id="settings-tab-button" class="tab-button" data-tab="#settings" data-tap-toggle="false"> <span class="languagespecificHTML" data-text="settings">Settings</span></li>
<li id="logout-tab-button" class="tab-button" data-tab="#logout" data-tap-toggle="false"></i> <span class="languagespecificHTML" data-text="logout">Logout</span></li>
</ul>

</div>
<div data-role="main" id="main" ><div class="pullable" data-id="#">
<div id="rendered" >
<img class="waiting" src="./img/spinner.gif"/>
</div></div>

</div>

</div>

</body>

<script type="text/javascript" src="js/pullToRefresh.js"></script>
<script src="js/fastclick.js"></script>

<script src="js/jQueryMD5.js"></script>
<script src="js/controller.js"></script>
<script src="js/index.js"></script>

</html>

If you are finding the plugin useful, please subscribe to the app - it's free for your congregation to use and only £9.99pm for a church subscription - free int'l bank transfers with Revolut

Forum Timezone: Europe/London

Most Users Ever Online: 101

Currently Online:
4 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Pastor Andres: 141

Rich Cox: 97

David Z.: 84

rrfranks: 69

seanmcint: 52

Allen: 51

Jon: 46

Gavin: 41

Nathan Booth: 36

Janeen: 23

Member Stats:

Guest Posters: 45

Members: 421

Moderators: 0

Admins: 1

Forum Stats:

Groups: 5

Forums: 14

Topics: 611

Posts: 2297

Administrators: andymoyle: 934