Home Forums Trusted Pro Header Help (mobile, desktop, tablet)

This topic contains 10 replies, has 2 voices, and was last updated by  Andy 1 day, 17 hours ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #2713

    planetshay
    Participant

    Hello, I am attaching several images on 3 different devices regarding the header/menu items that I need help with. See below:

    Desktop Views

    Like this:

    Tablet Landscape View (this needs centering as well)

    Tablet Portrait Views

    Mobile Portrait Views (is there any way to make the photo “not so big” in phone view?)

    Mobile Landscape Views

    This is allot I know but as I have mentioned before, I am a graphic artist, not a web developer, so my spacial orientation factor is really high.

    Thanks in advance πŸ™‚

    #2737

    planetshay
    Participant

    Hello,

    I know you helped me with my child theme problem and I really do appreciate that SO much πŸ™‚ How ever, I am still having problems with the above issues. One of the main things I need help with is setting up more space for the Site Title. I need to put Inc. on the end of the name but when I do is shows up below Mondy Global and looks funny. The spacing the way it is now also puts “Global” under Mondy in Tablet view and that just doesn’t look right? I want to adjust the space between the Title and the menu. Can you please help me with that?

    Also, my Menu on Tablet view is still backwards and needs to be fixed (see above photo).

    Is there any way to make the header picture in phone view be smaller? It takes up allot of space, even after scrolling.

    Thanks for your help πŸ™‚

    #2778

    Andy
    Keymaster

    Sorry for the delay in replying to you. We missed this thread somehow!

    Regarding the mobile menu, it looks like it is not so simple to change the width at which the mobile menu appears instead of the desktop menu, so the CSS I supplied previously won’t work fully as intended as the theme was not designed with this in mind.

    Going forward we are looking at adding functionality to a future update that will allow you to select when the mobile/dektop menu appears.

    #2793

    planetshay
    Participant

    1. So does this mean there is no way to add more space for the site title area itself and less for the main menu area? Changing the css rules for those areas should do it, I just need to know exactly which rules are involved. Could you please give me the names of those and I will try to figure it out, please?

    2. Is there no way to fix the menu on tablet view so that it won’t be backwards?

    3. Is there no way to change the size of the main header area when on phone view so that the picture isn’t so big?

    If you could at least give me the file names for these areas I can try and change them myself. I figure 1 and 2 have to do with css rules, I just need to know the css rule name. And 3 has to do with a php file, but which one and what rule? If you can point me in the right direction I would greatly appreciate it!

    #2795

    Andy
    Keymaster

    1. the site title is 20% on desktop and menu area is 80%. Change them like this:

    @media screen and (min-width: 1025px){
        #site-branding{
            width: 20%;
        }
        .site-navigation{
            width: 80%;
        }
    }

    this assumes not using the modified css from before to make the mobile menu only appear at a narrower width, so in your case you could use this:

    @media screen and (min-width: 769px){
        #site-branding{
            width: 20%;
        }
        .site-navigation{
            width: 80%;
        }
    }

    2. not at the moment no sorry it is quite a major change to get that to work how you want it. Please wait for the next update which will have option to change the break-point for mobile menu.

    3. this can be changed by changing the padding at top and bottom of the page title area:

    .header-title {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    the code above will format it on all screen widths, to change it on mobile only use this:

    @media screen and (max-width: 768px){
        .header-title {
            padding-top: 70px;
            padding-bottom: 70px;
        }
    }

    We’re happy to help with minor CSS modifications but if you are going to be changing a lot of the formatting I would very much recommend looking into using browser inspection tools which you could use to find the right elements to modify. See the links below for more information.

    #2797

    planetshay
    Participant

    I appreciate your help but unfortunately, it did not work. The code just jacked up the spacing of everything πŸ™ I will have to talk to my client once I share the site with them next week and see what they say. I may have to go with a different theme in all. I do appreciate your help on everything, however, I can’t seem to get the functionality I am trying to achieve, especially in mobile and tablet views πŸ™

    I did noticeΒ  that when in “mobile” version, I cannot see see the menu when you click on it. Both on phone and tablet? How do I fix that?

     

    #2811

    Andy
    Keymaster

    For now I would recommend you remove the additional CSS code relating to the navigation menu and site title, and wait for our planned update that will have options to change the break-point for mobile menu that I mentioned previously.

    Of course if you are finding the theme is not suitable for your needs, we do offer a 30 day money back policy. If you decide you would like a refund please let me know and I’ll issue it right away.

    #2820

    planetshay
    Participant

    Thank you Andy. I really do and have appreciated all your help πŸ™‚

    Do you happen to know when the next update will be?

    #2821

    planetshay
    Participant

    Oh, and how do I get the menu to be viable on mobile and tablet view? It only shows Home (not the other menu buttons). I did delete the code as you mentioned above but the menu on mobile and tablet did not change, it’s still invisible. Am I the only person this is happening to?

    #2824

    planetshay
    Participant

    I just figured it out. I didn’t realize you had put the css into my child theme style.css (I had the same code in my additional css rules and that’s where I deleted it from earlier). Therefore, it is fixed now. Thanks πŸ™‚ and sorry to bother you with this again!

    #2825

    Andy
    Keymaster

    Thanks for letting me know and glad it’s fixed now πŸ™‚

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.