Close

Account

Documentation

Forum

Menu

Providing Better Look and Navigation to my website when using in SmartPhones

  • Post count: 32
    fsalvares
    November 12, 2017 at 1:45 pm #25329

    Hi !

    The main goal of my website it to have a very clean appearance and easy navigation. JNews is proving to be a very nice theme to implement that.

    So, the main menu has ony four options. The HOME (INÍCIO in portuguese) page presents the only elements (I think) needed: list of posts and a Category (dropdown) widget.

    So far I’m having no trouble finding the customization options to do that, due to JNews so many and easy to set customizing options (I just started instalation and customization in about one week).

    When accessing my website (Olhar Refletido) in a computer screen it looks exactly how I wanted (Image 1). But when accessing it in a SmartPhone, it has an inconvenience, in my opinion.

    While using in a computer, the category widget shows as I wanted (Image 1), but in a SmartPhone (Image 2) you have to scroll down until the end of posts listing (Image 3) to have access to it (Image 4).

    What I want, to improve ergonomics and a better looking List of Categories, mainly when accessing in a SmartPhone, is to create a new menu item named “Categories” (Image 5 and Image 6)

    That way the <strongCategories page whould be presented in a computer screen as shown in Image 7 and in a SmartPhone screen as showun in Image 8.

    My question is: there is a way of doing that, using JNews customizing options? Or, should I have to create a new (custom) page template? Do you advise your users to create their own custom templates? If so, is there a means to insert a category listing in it?

    Hope I could present my question propperly.

    Thanks !

    Fernando (Brazil)

    List of Images

    Current Views

    Image 1: Image of my website current Home page (in a computer screen)
    Image 2: Image of my website current Home page (in a SmartPhone screen)
    Image 3: Image of my website current Scrolled to bottom Home page (in a SmartPhone screen)
    Image 4: Image of my website current Categories listing (in a SmartPhone screen)

    Desired Views

    Image 5: Image of my website desired Home page (in a computer screen)
    Image 6: Image of my website desired Menu appearande (in a SmartPhone screen)
    Image 7: Image of my website desired Categories page (in a computer screen)
    Image 8 Image of my website desired Categories page (in a SmartPhone)

    Post count: 1933
    Rai
    November 13, 2017 at 1:53 am #25350

    Hi Fernando,

    At the moment there is no option to disable the Sidebar, but we have consider to add this kind of option in the future. To accomplish your goal to hiding the sidebar in mobile (Image 3) you could use this additional CSS code:

    To add Categories page (Image 7 & 8) you could use Page and add WP Categories element to just display categories widget on the page. Create new Page (Pages > Add New) and name it “Categories”. Select “Landing Page” template. Switch to “Classic Mode” for a moment and copy this to contents:

    Switch back to “Backend Editor” and Publish it. After that, you can add this Categories page to your Menu on desktop and mobile.

    Thank you

    Post count: 32
    fsalvares
    November 13, 2017 at 1:59 pm #25393

    Hi Rai,

    Pardom my ignorance, where should I put this code?

    @media (max-width:767px) {
    .jeg_sidebar {
    display: none !important;
    }
    }

    Installed WP Categories Widget (please see image bellow. Is that the one you referred as “WP Categories element” ?) and activated it

    Created a page, named it “Categories“. Selected “Landing Page” template, switched to “Classic Mode” and inserted “[vc_row vc_row_background=””][vc_column width=”1/3″][vc_wp_categories options=”count,hierarchical”][/vc_column][vc_column width=”2/3″][/vc_column][/vc_row]” in it, saved page and showed page, but nothing happened, it just shows the inserted text.

    Please see image http://www.olharrefletido.com/misc/jedtheme-Providing-Better-Look-and-Navigation.jpg

    Thanks !

    Fernando (Brazil)

    Post count: 1933
    Rai
    November 14, 2017 at 1:06 am #25410

    Hi Fernando,

    Pardom my ignorance, where should I put this code?

    Please put it to Appearance > Customize > Additional CSS

    No, I was refer to WP Categories element from Visual Composer. Please see screenshot: https://cl.ly/1W0V0k2i2F3S
    Actually, you don’t have to add it manually because I already gave you the page contents. But, it seems you not activate the Visual Composer plugin yet?

    Best regards,
    Rai

    Post count: 32
    fsalvares
    November 14, 2017 at 11:08 am #25429

    Hi Rai,

    Now I understood your instructions and installed Visual Composer. It all worked fine (please see Figure 1). Such a very powerfull tool !

    Now it is working fine on a Computer screen and on SmartPhones.

    Regarding SmartPhones, it is still showing the widgets at the end of scroll (please see Figure 2), although I insert the code snippet you told me to do.

    Figure 1: http://www.olharrefletido.com/misc/jedtheme-Providing-Better-Look-and-Navigation-Shows-Computer.jpg

    Figure 2: http://www.olharrefletido.com/misc/jedtheme-Providing-Better-Look-and-Navigation-Shows-SmartPhone.jpg

    Thanks !

    Fernando (Brazil)

    Post count: 6417
    Adek
    November 15, 2017 at 1:56 am #25444

    Hi Fernando,

    About adding additional CSS code, please try to replace all content on Additional CSS input field with this code above :

    Also, for more detail please check this image https://www.dropbox.com/s/4e0a4elytcbrxzv/Screenshot%202017-11-15%2009.52.58.png?dl=0

    Thank you

    Post count: 32
    fsalvares
    November 15, 2017 at 7:31 am #25461

    Hi Adek,

    When you said try to “replace all content” I realized that I had inserted code you sent between comments (/* … */). Sorry for making you waste your time with my mistake.

    Now it worked fine. Please see image http://www.olharrefletido.com/misc/jedtheme-SmartPhone-Current-Page-Shows-OK.jpg.

    Believe all issues addressed are now solved.

    Thank you so much for your kind, helpful and patient assistance !

    Fernando (Brazil)

    Post count: 6417
    Adek
    November 16, 2017 at 1:55 am #25481

    You’re welcome Fernando and thanks for your kind words.

You must be logged in to reply to this topic.