Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1117204
    henrybag
    Participant

    WordPress 4.5.3, X-theme 4.6.1, Cornerstone 1.3.0
    Site URL: http://thepropertymediators.co.uk.gridhosted.co.uk/blog/

    Hi

    I have followed some instructions found on the forum to change the ‘read more’ into a button and can’t seem to get it to work.

    I have a child theme and have created the directory and duplicated as follows x-child/framework/functions/global/content.php

    On line 76 I have added the x-btn class to ” class=”more-link x-btn”

    When I tested the technique using the parent theme it seemed to work OK.

    Also…

    I’m wanting to alter the meta tags on both the blog index and remove the meta tags from the single blog item.

    Many thanks

    Henry

    #1117208
    henrybag
    Participant
    This reply has been marked as private.
    #1117478
    Rupok
    Member

    Hi there,

    Thanks for writing in! I am not sure which CSS you used to make it like a button but you can try this :

    .more-link {
      background: #63ceca none repeat scroll 0 0;
      color: #fff;
      font-family: "Montserrat",sans-serif;
      font-size: 14px;
      padding: 5px 10px;
    }

    Let’s change the CSS with your own.

    Cheers!

    #1121935
    henrybag
    Participant

    Hi

    Thanks that works fine, I was wondering if you could also help with the following issue.

    As you can see on the screengrab the menu is too long for a width of 1024px could you give me the correct CSS to enforce the ‘burger’ menu at this width

    Thanks
    Henry

    #1122031
    Christian
    Moderator

    Hey there,

    This particular situation is simply a matter of reworking your content to properly fit the physical limitations presented by the theme (this is a consideration that must be taken into account with all themes and designs). It is the same principal applied to filling up a room with furniture—there is only so much that can fit into a given space. The following should be considered in these situations:

    • Logo Size – longer logos will conflict with navigation items as you size your site down. If you are noticing a conflict, you may need to implement some CSS to size down your logo as viewports get smaller.
    • Shorter Names – you should always shoot to have your top-level navigation links be as simple as possible. For example, if your link is “Learn About My Company,” Try using “About” instead. It conveys the same idea and will save you a ton of real estate.
    • Rearrange – sometimes we want to put all of our links in the top-level navigation, but not all pages are created equally. Pages of lesser importance that pertain to a parent link might work well as a sub-menu instead.
    • Less Links – even on more “complex” websites with lots of pages, there are always ways to combine information together to make things simpler, which also ensures that your user doesn’t have to click around for every granular piece of information. For example, you might have two top-level links called “About” and “Contact,” which could possibly be combined into one. This eliminates the need for extra links and makes things much simpler for your users to navigate. Less is more in information architecture.
    • Appearance – fortunately X features plenty of options for adjusting the appearance of elements throughout your site, and the navbar is one of the more flexible elements. Try using a smaller font size if possible to save on a little real estate.

    Thanks!

    #1122160
    henrybag
    Participant

    Yes I’d thought about that but the client might want to keep the longer name, if there is a way of triggering the burger menu at the width can you let me know.

    Many thanks

    Henry

    #1122315
    Rupok
    Member

    Hi Henry.

    You can add this under Custom > CSS in the Customizer.

    @media (max-width: 1024px) {
     .masthead-inline .x-btn-navbar {
      display: block;
      float: right;
     }
     .x-nav-wrap.desktop {
      display: none;
     }
     .x-nav-wrap.mobile {
      display: none;
     }
     .x-nav-wrap.mobile.collapse.in {
      display: block;
     }
    }

    Hope this helps.

    #1125399
    henrybag
    Participant

    Many thanks that worked just fine

    Cheers

    Henry

    #1125607
    Thai
    Moderator

    Glad it worked 🙂

    If you need anything else please let us know.

  • <script> jQuery(function($){ $("#no-reply-1117204 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>