Premium Theme Support › The Theme Foundry › Photography

Size of menu and site title/tagline

  • Author
    Posts
  • #90351
    rascalspetphotography
    Member

    I tried some CSS coding to change the menu on my site into one line of text. this worked, but set the menu just above the photos on my home page because the Title of my site and tagline prevented the menu from sitting right at the top of the page ( desired option)
    I wonder if there is a CSS coding that will allow my menu items to form one line only and sit at the right hand side at the top of the page – whilst allowing for my site title and tagline to remain as large as possible.
    I look forward to your help – as i have tried viewing the coding via firefox and cannot get it to work.
    Kind Regards
    Amanda

    The blog I need help with is: (visible only to logged in users)

    #90451
    thehenrybyrd
    Staff

    Hiya – I chatted with Amanda today and wanted to add my 2 cents.

    Sounds like she’d like to have the Title and Tagline on the left, and the Menu on the right (but not above the Title and Tagline).
    It looks like the Photography theme is already set up to do this, but the menu gets bumped below the Title and Tagline when the headings font is set to “Huge” and the base font size is set to “large” instead of “normal” in the Customizer. She’s set these font sizes because it’s easier to read.

    I’m not a CSS expert, but the various ways I thought of to move the menu back up all sounded like they could cause responsiveness issues.

    For instance, changing the width of div.branding seemed to work, but of course this would change responsively based on the browser size.
    Similarly, if I hackishly used padding/margin to reposition the menu, that would be interpreted differently on different browsers/devices.

    Hopefully you know a better way to do this, or can find just the right sizes to make for a smooth transition from browser to mobile browser.

    Thanks a bunch!

    #90470
    scottrrollo
    Theme Author

    Hi there, Amanda!

    Tweaking your theme’s CSS style code is definitely the way to go.

    I can see several ways we could patch this up, but let’s start by simply reducing the spacing between your menu items — if the menu is slightly shorter, I’m thinking it’ll jump up into the position you’re looking for.

    To reduce your menu item’s padding, try this:

    nav[role=“navigation”] .nav li {
    padding-right: 20px !important;
}

    Let us know how that works ☺️

    PS: Thanks for the details, @thehenrybyrd!

    #90471
    rascalspetphotography
    Member
    Original poster

    Hi Scottrrollo !

    No luck, unfortunately….😔

    Do you think any of the existing CSS is affecting it ? I guess you have looked at it on my page….
    Thanks and hope there is another possibility !
    Amanda

    #90472
    scottrrollo
    Theme Author

    Hi again, Amanda 👋🏼

    So sorry to here that’s not working for your website.

    When you applied the code, did any change happen? I’m not seeing the code snippet I shared loading in your stylesheet at all — would you mind reapplying it so I can take a look?

    #90494
    rascalspetphotography
    Member
    Original poster

    Hi -it’s still there from when I loaded it -how weird ?
    My friend has also told me to load the following -but parts of that disappear when I look at CSS again. I have removed her code for now -but do I need to add it back ?

    @media screen and (min-width: 900px) {
    header[role=”banner”] .branding
    width: 30%;
    }
    }
    Amanda

    #90499
    rascalspetphotography
    Member
    Original poster

    Hi -just to add that I have added my friends coding suggestion above back onto my site again and it has definitely lost the following-:

    Header[role=”banner”] . branding

    I don’t understand -and none of these things make the slightest difference to the appearance 😔

    #90503
    scottrrollo
    Theme Author

    Oh! you may have just found the culprit, Amanda ☺️

    The code snippet you shared is incorrectly formatted, meaning that your entire stylesheet can be thrown off.

    Here’s the rule with correct formatting — please go give that a try and see if it fixes both problems.

    @media screen and (min-width: 900px) {
    header[role="banner"] .branding {
        width: 30%;
    }
}

    I hope this helps!

    #90510
    rascalspetphotography
    Member
    Original poster

    Yes I can see – a curly bracket was missing…!

    I now have a large menu up at the top RHS – and the CSS i typed in hasn’t disappeared – so that’s a step forward – thanks for spotting the mistake !
    I need to finalise by getting the whole menu on one line – is there a tweak we could add to sort that please ?

    Amanda

    #90511
    rascalspetphotography
    Member
    Original poster

    this is driving me mad !!!
    Really sorry to be such a pain – but I’ve just looked at the coding again – and the header[role=”banner”] . branding has disappeared again !!

    amanda

    #90512
    rascalspetphotography
    Member
    Original poster

    Hi Scott !

    I don’t know how, or why, or if it’s going to last – but somehow it seems to have righted itself finally !!
    i have been copying and pasting the coding in – but i just did it once last time before bed and tied it in, slightly changing position of last curly bracket…Whether it’s that – or something else, I’m not sure.
    I will check it in the morning and make sure still ok. if so – i will mark the topic as resolved.
    Fingers crossed and thank you
    amanda

    #90513
    rascalspetphotography
    Member
    Original poster

    sorry – ‘typed’ it in !

    #90521
    scottrrollo
    Theme Author

    How odd! Maybe it’s a caching issue? Either way, I’m so glad to hear this might just have sorted itself out, Amanda 😀

    Please let me know if any other problems crop up — we’d love to get your site all set up just the way you want it.

  • The topic ‘Size of menu and site title/tagline’ is closed to new replies.