Logo in the centre of the navbar - coding

[BBNZowner]

Hi there, I want to put a logo in the middle of my navbar, so it looks like this website for example: http://www.kinderfotografie-evihermans.be/ (ignore the specifics of that, it is just to show the position)

What CSS code would be used so that tabs are positioned to the left/right of the logo?

[tbworld]

Currently the navtabs are floated to the left or to the right as they are built using relative positioning, since you can add additional tabs from the navigational menu.

Fixed Layout
-------------
For a fixed width layout, there is no reason you cannot apply absolute positioning to the tabs through CSS. Of course you might have to modify it (slightly) every time you add a new 'navtab'.

So for example the 'forum' tab you could absolute position:

/* Add this to your additional.css template */
/*"vbtab_forum" is the identity field in the navigational manager */

.navtabs li#vbtab_forum {  
  position: absolute;
  right: 300px;
}

Fluid Layout - Cheat
---------------------
For a simple fluid layout, still allowing the 'navtabs' to float left (default), you could simple add a hidden dummy 'navtab', alter the CSS on that navtab to accommodate the width of your image then position your image over the hidden 'navtab'. However, keeping it in the center of your screen could be challenging to figure out. Altering the global 'navtab' width should resolve this issue.

Best Approach - Advanced
-------------------------------
The best approach is to modify the 'navbar' template and create two wrappers for the 'navtabs' positioning them to the left and the right. Then designating the 'navtabs' to either float left or float right, either by assigning the float direction via CSS to the 'navtab' using the HTML ID attribute or by adding a new field in the navigation table and use it to indicate float direction for the 'navtab' -- and applying this field's data as a variable to the navtab template to be used by the directional wrappers. (Sounds more complicated then it is.)

Anyway, I hope this gives you a starting point.

[BBNZowner]

Awesome, I'll see if I can play around with some of the suggestions tonight

[BBNZowner]

Originally Posted by tbworld

Best Approach - Advanced
-------------------------------
The best approach is to modify the 'navbar' template and create two wrappers for the 'navtabs' positioning them to the left and the right. Then designating the 'navtabs' to either float left or float right, either by assigning the float direction via CSS to the 'navtab' using the HTML ID attribute or by adding a new field in the navigation table and use it to indicate float direction for the 'navtab' -- and applying this field's data as a variable to the navtab template to be used by the directional wrappers. (Sounds more complicated then it is.)

Anyway, I hope this gives you a starting point.

Could I get some help coding this from someone please? I can't figure it out myself hahaha. Not quite there yet. It looks like the best way to go about it but I'm not quite sure how
:up:

Edit: I am starting to get somewhere with the first solution after some minor changes, I'll keep this updated

[tbworld]

Thanks for updating.

In reality one would rewrite the CSS and the HTML for the navbar, but that is a bit overwhelming for someone asking how-to.