Menu bar on Titan on mobile devices shows unaligned entries

Post Reply
jcpearce2005
Posts: 15
Joined: 06 Feb 2015, 20:34

24 Aug 2016, 12:23

When swithcing to responsive mode on Titan the list of top bar menu items can format in a bunch of unaligned entries, such as below
Image

Is there a way to get them to list in a series like in Spark (below), or Omega,

Image

Thank you.

User avatar
aragorn
Posts: 2643
Joined: 29 Jun 2013, 12:38

24 Aug 2016, 15:50

Can you please attach your topbar.xhtml for us to replicate?

jcpearce2005
Posts: 15
Joined: 06 Feb 2015, 20:34

26 Aug 2016, 19:14

Yes of course, thank you

I notice that the spark layout.js is around three times the size (20k) vs Titan's layout.js and I wonder if the differentiation is in there.

Code: Select all

<ui:composition 

    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">


    <!-- TOPBAR -->
    <div id="layout-topbar">

        <!-- LOGO -->
        <a href="index.xhtml" id="logo">

            <p:graphicImage name="images/logo.svg" id="forFlying"  library="titan-layout" />
            <p:graphicImage name="images/logo.svg" id="forFixed"  library="titan-layout" />

        </a>

        <!-- MENUBUTTON -->
        <a id="menu-button"> <i class="icon-chevron-down"></i> </a>

        <!-- SEARCH -->

        <!-- TOPBAR LINKS -->
        <a id="topmenu-button"> <i class="icon-list2"></i> </a>

        <ul id="topbar-menu">
            <li><a href="https://osiitservices.com/osi/faces/prv/index.xhtml"><i class="fa fa-sign-in" style="color: #046b99;"></i> Log In</a></li>
            <li><a href="testimonials.xhtml"><i class="fa fa-quote-left" style="color: #046b99;"></i> Testimonials</a></li>

            <li><a href="#"><i class="fa fa-mobile-phone" style="color: #046b99;"></i> The digital advantage</a></li>
            <li><a href="locations.xhtml"><i class="fa fa-street-view" style="color: #046b99;"></i> Locations</a></li>
            <li><a href="#"><i class="fa fa-group" style="color: #046b99;"></i>Specializations</a></li>
            <li><a href="signup.xhtml"><i class="fa fa-pencil-square-o" style="color: #046b99;"></i> Signup</a></li>
            <li><a href="contact-us.xhtml"><i class="fa fa-comments-o" style="color: #046b99;"></i> Contact us</a></li>
            <li><a href="pricing.xhtml"><i class="fa fa-dollar Fs18 " style="color: #046b99;"> </i> Pricing</a></li>
            <!--
            <li>
                <a class="Animated05 CursPointer"><i class="fa fa-user"></i> Welcome Hoe  <i class="fa fa-chevron-down Fs14 Fright ShowOnMobile"></i></a>
                <ul style="width:175px; margin-left:-10px;" class="Animated03 submenu">
                    <li><a class="Animated05"><i class="fa fa-user Fs30 Fleft"></i> <span class="Fright Fs20 TexAlRight"><span class="Fs10 DispBlock">   
                                </span></span></a></li>
                    <li><a href="mypendingtasks.xhtml" class="Animated05"><i class="fa fa-suitcase"></i>Open Tasks </a></li>
                </ul>
            </li>
            -->
        </ul>

        <!-- MENU COVER -->
        <div id="layout-menu-cover">
            <ui:include src="layoutmenu.xhtml" />
        </div>

    </div>

    <!-- TOPMENU -->
    <ul id="top-menu" class="MarBot30">
        <li class=" ">  &#x0020;  .. </li>   
    </ul>

</ui:composition>

jcpearce2005
Posts: 15
Joined: 06 Feb 2015, 20:34

29 Aug 2016, 16:07

Also with Titan I am unable to add a submenu item to the menu bar, in Spark it works well and looks like

Code: Select all

 <li>
                        <a class="Animated05 CursPointer"><i class="fa fa-user"></i> John DOE, Welcome <i class="fa fa-chevron-down Fs14 Fright ShowOnMobile"></i></a>
                    <ul style="width:175px; margin-left:-10px;" class="Animated03 submenu">
                        <li><a class="Animated05"><i class="fa fa-user Fs30 Fleft"></i> <span class="Fright Fs20 TexAlRight">John DOE<span class="Fs10 DispBlock">Last login 18:50</span></span></a></li>
                        <li><a href="#" class="Animated05"><i class="fa fa-dashboard"></i> My Profile</a></li>
                        <li><a href="#" class="Animated05"><i class="fa fa-magic"></i> My Settings</a></li>
                        <li><a href="#" class="Animated05"><i class="fa fa-suitcase"></i> Tasks <span class="notification-bubble BordRad3 Fright">24</span></a></li>
                        <li><a href="#" class="Animated05"><i class="fa fa-quote-right"></i> Notifications <span class="notification-bubble BordRad3 Fright">18</span></a></li>
                    </ul>
                </li>
The demo does not have any submenu's and when trying to add them in a similar manner in Titan the submenu items show up without opening up the drop down. These two menu issues; unaligned entries on mobile, and no drop down are the only things holding me up, otherwise primefaces rocks.

jcpearce2005
Posts: 15
Joined: 06 Feb 2015, 20:34

02 Sep 2016, 19:57

Any ideas, progress?

I've bought another theme, the newest Ultima, but for this application Titan is still the best purchase I've made and I'd like to get it to work.

Thank you.

User avatar
aragorn
Posts: 2643
Joined: 29 Jun 2013, 12:38

08 Sep 2016, 14:57

First issue; What is the height and width of logo.svg?
Second issue; Titan doesn't support nested topbar item like topbar of spark.

User avatar
aragorn
Posts: 2643
Joined: 29 Jun 2013, 12:38

08 Sep 2016, 15:18

For first issue, please try;

Code: Select all

<style type="text/css">
    .FlyingTopbar #menu-button,
    .FixedTopbar #menu-button{
          margin-left: 150px; /* you can change this value according to width of your logo */
    }
    #logo {
         position: absolute;
         left: 14px; /* you can change this value according to your logo */
         top: 16px; /* you can change this value according to height of your logo */
    }
</style>

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest