• Resolved CPR99

    (@cpr99)


    Hi,

    I updated to latest version & some of my css coding stopped working so I removed it. Then I centred my Nav bar & it looked fine in latest FF but on my client’s PC in IE it wrapped it onto 2 lines, so I removed the code & left it to the theme’s left alignment. Looked fine in my FF & IE11 with W7, on a W8 laptop in IE11 & on a tablet, but on the client’s desktop it has stretched the menu much more over to the left. I’ve yet to find out what version, but they downloaded latest FF & had same issue & so did a 3rd party on FF. I don’t understand why it looks OK on my 3 devices in both browsers but not on others.

    The left side of menu shouldn’t stretch out further than width of image under. Preferably I’d like to center it but that caused 2 lines in IE.

    If you can see anything obvious in my code or help with this conundrum I’d be truly grateful.

    see site

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter CPR99

    (@cpr99)

    Client is on same as me IEv11 and I checked her screen size and it’s set to 125% same as mine. When we played with screen sizes instead of the header bar moving around within the screen, at some sizes it disappeared off the screen. Is this an issue with the bootstrap thingy and it’s not changing to suit different devices?

    Testing the responsiveness of different browsers is tough. It takes a lot of diligence to try and cater for all situations.

    Don’t think you have a Bootstrap issue.

    On my 1920px monitor, the menu looks too much to the left. I’ve tried to center it using:

    .navbar .nav {
        position: relative;
        left: 50%; /* Changed this line */
        display: block;
        float: left;
        margin: 0px 10px 0px 0px;
    }

    Next thing is to decide on breakpoints (eg 1920,1680,1280,1024,980) and you’ll see that 50% needs to be adjusted for each viewport. This is what @media resolves.

    Thread Starter CPR99

    (@cpr99)

    Thanks rdell, I am having a play with that code, but whatever I do it looks rubbish on client’s screen, looks perfect on mine.

    I tried to use the nav bar box hoping that would keep it all together, which she likes, but now she’s got a very stretched box and it disappears on the About Us page. If I get it perfect for her screen the menu titles are way over to the right on my screens and hanging out of the box. I wouldn’t expect it to be sooo way out on different browsers or can it be? Also everything else is perfect which also seems strange to me and makes me think there is defo a header issue?

    I have another WP site and if you change the page view % in your screen view, the headings are still there, but wrap onto other lines, but with this they just disappear and I’m thinking something isn’t right somewhere. I did another customizr site ages ago and didn’t have this trouble.

    I realised also that I’ve not updated to 3.4.11 and wonder if this will make matters worse or not, as this all started after updating to 3.4.9

    I hate being beaten, but as my kids would say – it’s doing my head in!

    Thanks

    PS Is it normal for companies to trawl this forum and try and steal our clients? Someone’s just emailed mine directly after seeing my post!!

    Don’t think upgrading to 3.4.11 will cause any problems, and at least you’ll be on the latest code base.

    Browsers unfortunately do have their own mysteries and code rarely generates identically in all the common browsers, IE-FF-Chrome-Safari-Opera and now Edge.

    Some selectors demand a different string. You’ve probably seen code like:
    -webkit-transition:
    -o-transition:
    -moz-transition:
    -ms-transition:
    transition:

    As for the PS, I guess there are rogues in every business that will do something like that. I hope your client has the sense to realise that to listen to a company behaving in that manner is a recipe for disaster.

    Thread Starter CPR99

    (@cpr99)

    Thanks and I will keep trying.

    Luckily my client is also a friend and forwarded the email from Fix Runner!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Nav bar menu layout breaking in some browsers’ is closed to new replies.