Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 06 Mar 2014, 06:25
BBNZowner's Avatar
BBNZowner BBNZowner is offline
 
Join Date: Oct 2013
Logo in the centre of the navbar - coding

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?
__________________
"The greatest barrier to success is the fear of failure."

Non-profit organisation owner; designer.
Reply With Quote
  #2  
Old 06 Mar 2014, 10:10
tbworld tbworld is offline
 
Join Date: Oct 2008
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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.

Last edited by tbworld; 06 Mar 2014 at 11:03.
Reply With Quote
  #3  
Old 07 Mar 2014, 03:46
BBNZowner's Avatar
BBNZowner BBNZowner is offline
 
Join Date: Oct 2013
Awesome, I'll see if I can play around with some of the suggestions tonight
__________________
"The greatest barrier to success is the fear of failure."

Non-profit organisation owner; designer.
Reply With Quote
  #4  
Old 16 Mar 2014, 06:24
BBNZowner's Avatar
BBNZowner BBNZowner is offline
 
Join Date: Oct 2013
Originally Posted by tbworld View Post

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


Edit: I am starting to get somewhere with the first solution after some minor changes, I'll keep this updated
__________________
"The greatest barrier to success is the fear of failure."

Non-profit organisation owner; designer.

Last edited by BBNZowner; 16 Mar 2014 at 07:13.
Reply With Quote
  #5  
Old 16 Mar 2014, 07:51
tbworld tbworld is offline
 
Join Date: Oct 2008
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.
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 13:16.

Layout Options | Width: Wide Color: