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

Navigation Bar issue >:|

Cryptaline

Active member
#1
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.
 

MagnusB

Well-known member
#3
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

Active member
#4
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.
 

MagnusB

Well-known member
#8
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).
 

MagnusB

Well-known member
#10
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

Active member
#11
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 ><)
 

MagnusB

Well-known member
#12
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.
 

Cryptaline

Active member
#13
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 :)
 

MagnusB

Well-known member
#14
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

Active member
#17
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:
 

Cryptaline

Active member
#18
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 :)
 

MagnusB

Well-known member
#19
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;