• Resolved nladmin

    (@nladmin)


    Dear theme experts,
    Please see what happens here https://painmanagementnaples.com/ when the browser width is shrunk but before the menu on top turns into the icon. When the menu items wrap to the second line, I would like the second row menu items to remain left aligned. How can I accomplish this?
    Thanks a million for your help.
    Asli Theobald

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi,
    this is because menu-items a (a hrefs) have a padding, don’t know any way to achieve what you want if not set a padding-left 0 for the “first” item of the second row for each viewport.
    Basically you have to use some tool like firebug (firefox’s extension) or google-chrome inspect element, shrink the window, and then see at each viewport which element drops on the second line, grab its selectors and write a media query rule for it.
    Or, you can try to decrease menu items padding and font-size (for desktop viewport => min-width:980px) to some values which prevents the wrapping on two lines..

    Thread Starter nladmin

    (@nladmin)

    Hi,
    Thanks a lot for your reply, I really appreciate it. What I’d like to do is to make the left padding zero for all menu items including those of the sticky menu that comes up when you scroll. Then I’d like to increase the right padding only for all without worrying about viewport sizes. But to do this I need to know how to access the navbar menu links and sticky menu links. When I inspect with the browser what it tells me does not seem to work. How do I access both menu links? Thanks a million once again for your help, since if only I can solve this my site will look totally professional with your theme :).
    Sincerely,
    Asli

    Hi Asli,
    try this:

    .tc-header .navbar ul.nav > li.menu-item > a {
        padding-left: 0;
    }
    /* a little space in mobile menu, remove the following if you don't want it */
    @media (max-width: 979px){
    .tc-header .navbar ul.nav > li.menu-item > a { padding-left: 10px; }
    }

    Hope this helps.

    p.s.
    it’s not my theme all the honors to nikeo ??

    Thread Starter nladmin

    (@nladmin)

    Hi,
    It unfortunately did not work, but after much trial and error the following finally did work:
    .navbar .nav > li > a {
    padding-left: 5px;
    }
    The https://painmanagementnaples.com/ menu and sticky navbar links now do align ?? :).
    Thanks for guiding me it was a padding issue.
    Asli

    Well, weird it didnt work for you, because the css I gave you was a little more complex to override the padding-left: 5px for the first item.
    For the record I tested it live on your site before pasting it here, and retesting it, always live on your site, still works ??
    So I’m wondering why didn’t work when you tried… but anyway I’m glad you solved.
    Would you mind marking this topic as resolved?
    thanks

    Thread Starter nladmin

    (@nladmin)

    Funny… I’m marking this resolved

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘When the menu items wrap, they don't align properly’ is closed to new replies.