Textpattern CMS

#1 2012-05-02 12:40:13

skualito

Member

Registered: 2010-10-14

Posts: 24

center nav block with new default theme

Hi

I’m using the latest revision of txp, and have been trying for two hours or so to center the <nav> of the default (html 5) theme. I want it like this:

edit: removed crappy example

It might be trivial, but I can’t find a way (I’m not good (yet) at css) to do it without breaking the responsive effect of ul>li stacking on small screen.
I need help ;)

Thanks, Pascal

Last edited by skualito (2012-05-02 12:43:47)

#2 2012-05-02 14:54:54

uli

Moderator

From: Cologne

Registered: 2006-08-15

Posts: 4,306

Re: center nav block with new default theme

Just in order to put down one more enticing stepping stone: You mean Phil’s new theme?

---

_{In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links}

#3 2012-05-02 15:17:11

skualito

Member

Registered: 2010-10-14

Posts: 24

Re: center nav block with new default theme

uli wrote:

Just in order to put down one more enticing stepping stone: You mean Phil’s new theme?

yes, that’s what I mean.

#4 2012-05-02 15:39:28

philwareham

Core designer

From: Haslemere, Surrey, UK

Registered: 2009-06-11

Posts: 3,564

Website GitHub Mastodon

Re: center nav block with new default theme

In the CSS file, lines 1302 to 1310…

Change this:

nav ul {
  width: 93.75%;
}

nav li {
  float: left;
  border-right: solid 1px #e1a61a;
  border-bottom: 0;
}

To this:

nav ul {
  max-width: 93.75%;
  text-align: center;
}

nav li {
  border-right: solid 1px #e1a61a;
  border-bottom: 0;
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  /* display and zoom IE7 fix for display:inline-block */
  *display: inline;
  *zoom: 1;
}

Finally, because of the way HTML works there is now some extra unwanted padding at the start of each <li> element, so the way around this is to collapse the white space in your page templates between the txp:section_list tags, so this:

<txp:section_list default_title='<txp:text item="home" />' include_default="1" wraptag="ul" break="">
      <li<txp:if_section name='<txp:section />'><txp:if_search><txp:else /><txp:if_category><txp:else /><txp:if_author><txp:else /> class="active"</txp:if_author></txp:if_category></txp:if_search></txp:if_section>>
        <txp:section title="1" link="1" />
      </li>
    </txp:section_list>

Becomes this:

<txp:section_list default_title='<txp:text item="home" />' include_default="1" wraptag="ul" break=""><li<txp:if_section name='<txp:section />'><txp:if_search><txp:else /><txp:if_category><txp:else /><txp:if_author><txp:else /> class="active"</txp:if_author></txp:if_category></txp:if_search></txp:if_section>><txp:section title="1" link="1" /></li></txp:section_list>

Let me know if that works for you.

Last edited by philwareham (2012-05-02 15:41:54)

#5 2012-05-02 15:46:47

skualito

Member

Registered: 2010-10-14

Posts: 24

Re: center nav block with new default theme

Thanks a lot Phil! That’s working perfectly.