WebsiteBaker Support (2.8.x) > Templates, Menus & Design

Resposive or mobile friendly template

<< < (6/10) > >>

instantflorian:
In the style.css add quite far down, just above

--- Code: ---/* ================= (...and some more of these) */
/* Smaller Screens */

--- End code ---


the following code


--- Code: ---.leftbox  li {
  list-style-type:none;
}

--- End code ---

applepie:

--- Quote from: instantflorian on May 18, 2015, 07:40:29 PM ---
--- Code: ---.leftbox  li {
  list-style-type:none;
}

--- End code ---

--- End quote ---
Thanks for that. Very helpful for me to know what to look for. I added that but it didn't work at first. So I added it to line 43 and it works. My other problem I am encountering is that the submenu is not resposive. It shows straight under the main menu and then my page content directly below. How can I make them like the main menu. I want it to say submenu on mobile instead of showing a long list of my submenu. This has been really challenging. I wouldn't have gone this far without the input from you guys. I raise my hat to all who contributed and helped me in this journey. Hope someone can help me with this last huddle.
Thanks.

instantflorian:

--- Quote --- I added that but it didn't work at first.
--- End quote ---

You're right, I did'nt read the CSS carefully and missed that there started the media query section already.

To your question about the responsibilty of the submenu: it's not as simple at it might seem.

1) edit the script.js of the template. After

--- Code: ---function showmenu() {
mm = document.getElementById("mobile").style.display;
if ( mm == 'block') {
document.getElementById("mobile").style.display = 'none';
document.getElementById("mobilemenu").style.display = 'block';
} else {
document.getElementById("mobile").style.display = 'block';
document.getElementById("mobilemenu").style.display = 'none';
}
}

--- End code ---

add the following code:

--- Code: ---function showsubmenu() {
mm = document.getElementById("mobilesub").style.display;
if ( mm == 'block') {
document.getElementById("mobilesub").style.display = 'none';
document.getElementById("mobilesubmenu").style.display = 'block';
} else {
document.getElementById("mobilesub").style.display = 'block';
document.getElementById("mobilesubmenu").style.display = 'none';
}
}

--- End code ---

2) edit the style.css.
Find 2x

--- Code: ---a#mobilemenu {
--- End code ---
and change it to

--- Code: ---a#mobilemenu, a#mobilesubmenu {
--- End code ---

Find

--- Code: ---a#mobilemenu span {display:block; padding: 10px 15px ; font-weight: bold;}
--- End code ---
and change it to

--- Code: ---a#mobilemenu span, a#mobilesubmenu span {display:block; padding: 10px 15px ; font-weight: bold;}
--- End code ---

Find

--- Code: ---ul#mobile {display:none;}
--- End code ---
and change it to

--- Code: ---ul#mobile, ul#mobilesub {display:none;}
--- End code ---

3) edit the index.php.

In the show_menu2 call for $childpages, replace the last '' (pair of inverted commas) in the round brackets with

--- Code: ---'<ul id="mobilesub">'
--- End code ---
(including the inverted commas!)

Above the

--- Code: ---<?php 
echo $childpages; 
echo $page_content_2; ?>

--- End code ---
add

--- Code: ---<a id="mobilesubmenu" href="javascript:showsubmenu();"><span>Submenu</span></a>

--- End code ---

so it looks like


--- Code: ---<a id="mobilesubmenu" href="javascript:showsubmenu();"><span>Submenu</span></a>
<?php 
echo $childpages; 
echo $page_content_2; ?>

--- End code ---

Maybe there's some more fine tuning necessary, but this should work.

applepie:

--- Quote from: instantflorian on May 19, 2015, 11:53:24 AM ---
--- Quote ---
I found everything you said until I came to point 3. My code for the child pages is different from yours. This is my problem. To get it to work the way I wanted I have used below instead of

--- Code: ---show_menu2 call for $childpages, replace the last '' :
--- End code ---
Beside that there is no '<ul id="mobilesub">' in my index.php page

--- Code: ---$childpages = '';
ob_start();
show_menu2(0, SM2_ROOT+1, SM2_START, SM2_ALL, '<li class="[class]">[a][menu_title]</a></li>', '', '', '', '');
$childpages = ob_get_contents();
ob_end_clean();

--- End code ---

--- End quote ---

--- End quote ---

instantflorian:
Replace


--- Code: ---show_menu2(0, SM2_ROOT+1, SM2_START, SM2_ALL, '<li class="[class]">[a][menu_title]</a></li>', '', '', '', '');

--- End code ---

with


--- Code: ---show_menu2(0, SM2_ROOT+1, SM2_START, SM2_ALL, '<li class="[class]">[a][menu_title]</a></li>', '', '', '', '<ul id="mobilesub">');

--- End code ---

Navigation

[0] Message Index

[#] Next page

[*] Previous page