Can you please supply an example css for modifying the menu in the app | Support | Support

Support Forum

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
Can you please supply an example css for modifying the menu in the app
8th October 2019
11:02 pm
Avatar
Playas de Rosarito, Baja California, Mexico
Member
Members
Forum Posts: 39
Member Since:
9th July 2019
sp_UserOfflineSmall Offline

We want to dress up the menu but are not sure how to approach it.

9th October 2019
7:22 am
Avatar
Admin
Forum Posts: 721
Member Since:
4th March 2015
sp_UserOfflineSmall Offline

The markup for the menu section of the app... (It gets changed dynamically with which items!)

<div>
<h2><span id="menu"><i class="fa fa-bars"></i> <span id="church" class="tab-button">Home</span></span> </h2>
<ul class="menu ui-listview">
<li id="home-tab-button" class="tab-button"> <span class="languagespecificHTML">Home</span></li>
<li id="account-tab-button" class="tab-button"> <span class="languagespecificHTML">Account</span></li>
<li id="address-tab-button" class="tab-button"> <span class="languagespecificHTML">Address</span></li>
<li id="bible-tab-button" class="tab-button"> <span class="languagespecificHTML">Bible</span><span id="bible-badge"></span></li>
<li id="calendar-tab-button" class="tab-button"><span class="languagespecificHTML">Calendar</span></li>
<li id="classes-tab-button" class="tab-button"> <span class="languagespecificHTML">Classes</span></li>
<li id="giving-tab-button" class="tab-button"><span class="languagespecificHTML">Giving</span></li>
<li id="group-tab-button" class="tab-button"> <span class="languagespecificHTML">Groups</span></li>
<li id="media-tab-button" class="tab-button"><span class="languagespecificHTML">Media</span></li>
<li id="news-tab-button" class="tab-button"><span class="languagespecificHTML">News</span> <span id="news-badge"></span></li>

<li id="prayer-tab-button" class="tab-button"> <span class="languagespecificHTML">Prayer</span> <span id="prayer-badge"></span></li>
<li id="rota-tab-button" class="tab-button"> <span class="languagespecificHTML">Rotas</span></li>
<li id="settings-tab-button" class="tab-button"> <span class="languagespecificHTML">Settings</span></li>
<li id="logout-tab-button" class="tab-button"> <span class="languagespecificHTML">Logout</span></li>
</ul>

The CSS...

.menu{display:none;z-index:999; position:absolute;top:0 left:0; width:100%; height:100%;background:#FFF;}
.menu li{border: 1px solid #CCC; margin:0!important; padding:10px 20px;}
.menu ul{list-style-type:none;}

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

Forum Timezone: Europe/London

Most Users Ever Online: 35

Currently Online: Hofkirche
4 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

David Z.: 78

Rich Cox: 60

Allen: 51

rrfranks: 40

PastorAndres: 39

Gavin: 35

Janeen: 23

365sussex: 21

Jon: 21

ehout: 20

Member Stats:

Guest Posters: 40

Members: 371

Moderators: 0

Admins: 1

Forum Stats:

Groups: 4

Forums: 13

Topics: 461

Posts: 1728

Administrators: andymoyle: 721