1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Navigation Bar issue >:|

Discussion in 'Styling and Customization Questions' started by Cryptaline, Aug 9, 2012.

  1. Cryptaline

    Cryptaline Active Member

    It is s very specific problem. I have this issue only with a profile tab, inbox & alerts tab.

    As you can see on a screen below:

    social-top.png
    (First 2 pieces - main page, 2 others - profile , inbox & alert pages)

    On a main page (index.php) everything looks ok, but when im switching to the tabs i ve mentioned, style is broken. Everything looks not as i wish it 2 look. Probably its a problem with these properties:

    .Popup .PopupControl.PopupOpen,
    .Popup.PopupContainerControl.PopupOpen

    What i need, its just to correct tab styles on each page. However, if you do smth with properties eg padding margin etc, it may correct profile tab, inbox & alerts tab but will broke the index.php page tabs style.

    Could you give a lil tip how to fix this issue.
    Thank you.
     
  2. Cryptaline

    Cryptaline Active Member

    Say if you need a forums link.
     
  3. MagnusB

    MagnusB Well-Known Member

    You have probably set a margin somewhere. It is either below the menu button or above the submenu container. You will find the CSS in xenforo_popup.css template or in the Header & navigation style property group.
     
    Cryptaline likes this.
  4. Cryptaline

    Cryptaline Active Member

    I ve set this properties to a whole tab container, e.g:

    .navTabs .publicTabs .selected .navLink {
    1. padding: 5px 15px 5px 15px;​
    2. background: white;​
    3. border-right: 1px solid #DBDBDB;​
    but this wont work for a profile popup menu.
     
  5. MagnusB

    MagnusB Well-Known Member

    Can you provide a link?

    EDIT:
    And preferably a test user, as the problem requires me to be logged in to see it. Feel free to PM me the details.
     
    Cryptaline likes this.
  6. Cryptaline

    Cryptaline Active Member

    Maybe its something with VisitorTabs (need to add some propertie etc) because with PublicTabs all i ve done works perfect.
     
  7. Cryptaline

    Cryptaline Active Member

    Sure thing hang on.
    Check conversations :)
     
  8. MagnusB

    MagnusB Well-Known Member

    Here is the issue, with the box "jumping around", you have a padding of 5px for popup open:
    Code:
    .Popup .PopupControl.PopupOpen, .Popup.PopupContainerControl.PopupOpen {
    color: #737373;
    background-color: #F9F9F9;
    padding: 5px;
    margin-left: -1px;
    border-right: 1px solid #DBDBDB;
    border-left: 1px solid #DBDBDB;
    }
    This is controlled by the template xenforo_popup.css or the style property Popup Menus -> Popup Control (open).
     
    Cryptaline and Jake Bunce like this.
  9. Cryptaline

    Cryptaline Active Member

    Oh man, i was working whole 2 days, so sleepy :) havnt mentioned this sneaky one. Thx!
     
  10. MagnusB

    MagnusB Well-Known Member

    I also saw you have different active states on the user menu tabs than on the public tabs. I am not sure this is intentional or not.

    Also, really nice style you have going there! Just one suggestion, you really need a login link somewhere, or if you have one, make it more visible. I really struggled finding one and in the end just clicked on a link that was not accessible to guests (the account link).

    EDIT:
    And the quick navigation menu has a transperant background, adding a background color to this rule seems to solve it:
    Code:
    .xenOverlay #jumpMenu .jumpMenuColumn {
    float: left;
    width: 325px; }
     
    Cryptaline likes this.
  11. Cryptaline

    Cryptaline Active Member

    Thx alot, well i ve combined my own engine and xenforo only a few days ago. Will adjust everything for user needs ofc. But right now want to fin with style.
    Could you point on different active states pls, prob thats what im looking for atm. Because even when im canceling padding: 5; my style is still broken (in a diff way but its broken ><)
     
  12. MagnusB

    MagnusB Well-Known Member

    Hmm, it is still present when I visit:
    hoverstate.PNG
    Code:
    .Popup .PopupControl.PopupOpen, .Popup.PopupContainerControl.PopupOpen {
    color: #737373;
    background-color: #F9F9F9;
    padding: 5px;
    margin-left: -1px;
    border-right: 1px solid #DBDBDB;
    border-left: 1px solid #DBDBDB;
    }
    If you have defined it more than one place, it could be good to search your templates for that phrase, got to ACP -> Appearance - Search Templates and then search for template containing .Popup.PopupContainerControl.PopupOpen

    By active state, I mean that for example for the public tabs (Forums etc) you have a white background, while for visitor tabs (user menu, inbox etc) you have defined a padding for the active state. The CSS I refer too:
    Code:
    .navTabs .visitorTabs .selected .navLink {
    padding: 0 15px 10px;
    }
    For visitor tabs and:
    Code:
    .navTabs .publicTabs .selected .navLink {
    padding: 5px 15px 5px 15px;
    background: white;
    border-right: 1px solid #DBDBDB;
    }
    Changing the padding in the visitorTabs .selected rule above to background-color: #F9F9F9; seems to do the trick.
     
    Jake Bunce and Cryptaline like this.
  13. Cryptaline

    Cryptaline Active Member

    First of all thx for the quick nav issue. Fixed this.
    I don't have

    .Popup .PopupControl.PopupOpen, .Popup.PopupContainerControl.PopupOpen {
    color: #737373;
    background-color: #F9F9F9;
    padding: 5px;
    margin-left: -1px;
    border-right: 1px solid #DBDBDB;
    border-left: 1px solid #DBDBDB;
    }


    in a dif places. Just left this as it was before. Need to work with Public tabs and Visitor tabs as u ve mentioned :)
     
  14. MagnusB

    MagnusB Well-Known Member

    On second thought on my color suggestion above, I think you would want it to be #FFF, not #F9F9F9, as the F9 color you use for Popup open, not active. You use white for active in the public tabs.
     
    Cryptaline likes this.
  15. Cryptaline

    Cryptaline Active Member

    Fixed (now its also padding: 5px 15px 5px 15px )
    Code:
    .navTabs .visitorTabs .selected .navLink {
    padding: 0 15px 10px;
    }
    thx.
     
    MagnusB likes this.
  16. MagnusB

    MagnusB Well-Known Member

    No problem :)
     
  17. Cryptaline

    Cryptaline Active Member

    One realy lil issue with canceling padding: 5; property in a xenforo_popup.css:
    Code:
    .Popup .PopupControl.PopupOpen,
    .Popup.PopupContainerControl.PopupOpen
    {
    @property "popupControl";
    color: #737373;
    background-color: #f9f9f9;
    padding: 5px;
    margin-left: -1px;
    border-right: 1px solid #DBDBDB;
    border-left: 1px solid #DBDBDB;
    @property "/popupControl";
    }
    when i change it to:

    Code:
    .Popup .PopupControl.PopupOpen,
    .Popup.PopupContainerControl.PopupOpen
    {
    @property "popupControl";
    color: #737373;
    background-color: #f9f9f9;
    padding: 0px;
    margin-left: -1px;
    border-right: 1px solid #DBDBDB;
    border-left: 1px solid #DBDBDB;
    @property "/popupControl";
    }
    this happens on all pages:

    social-top.png

    which is also not good. Need to find how to fix it probably with adding some extra padding properties somewhere else :coffee:
     
  18. Cryptaline

    Cryptaline Active Member

    i will leave it as it is (with broken style when u put padding property to 0) mb this will help a lil to find out how to fix it. Right now need a lil break for coffe :)
     
  19. MagnusB

    MagnusB Well-Known Member

    I might be wrong here, but I think your problem is here:
    Code:
    .navTabs .navTab.selected.PopupOpen .navLink {
    color: #737373;
    background-color: #F9F9F9;
    padding: 5px;
    margin-left: -1px;
    border-right: 1px solid #DBDBDB;
    border-left: 1px solid #DBDBDB;
    }
    Change the padding: 5px; to padding: 5px 15px 5px 15px;
     
  20. MagnusB

    MagnusB Well-Known Member

    Or some sleep, if you been at it for 2 days :D
     
    Cryptaline likes this.

Share This Page