Navigation Bar issue >:|

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.webp
(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.
 
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.
 
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.
 
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).
 
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; }
 
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 ><)
 
Hmm, it is still present when I visit:
hoverstate.webp
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.
 
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 :)
 
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.
 
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.webp

which is also not good. Need to find how to fix it probably with adding some extra padding properties somewhere else :coffee:
 
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 :)
 
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;
 
Top Bottom