Joomla Templates Club 406,261 posts

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#130363

As Iris is configured out-of-the-box, the mainnav extends only as far as there are menu items.

What I want to accomplish is to extend the mainnav bar across the full width of my site – very much like the main JoomlART website’s main navigation above (i.e. where the bar extends the full width, even though there are only five menu items).

How might I accomplish this within the Iris structure?

THANKS !!!

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#257525

HI tcraw1010 !
Please send url of your site.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#257611

<em>@hainn84 63793 wrote:</em><blockquote>HI tcraw1010 !
Please send url of your site.</blockquote>
hainn . . . As I stated in my other thread, I am currently designing on my localhost server (via xammp). So, I cannot provide a url at this time.

I’m thinking my question is a matter of a css configuration – I’m just not sure how to go about it.

Again, if you look at the Iris demo (quickstart) template, you will see the top mainnav menu items “Home, Typography, Layout, Sample Content, Contact Us.” The current “mainnav” css is such that the manu items have a border and an inactive background of “FFFFFF” – and the mainnav bar only extends across the width of the site as far as the last menu item – in the case of the Iris demo, “Contact Us.”

Now, in my designing, I have modified the “inactive” background color to a darker color – and what I want to accomplish is to have the mainnav menu “bar” extend across the full width of the site . . . pretty much exactly like the main JoomlART mainnav menu looks at the top of this page (see how the menu items end at “Contact Us,” but the nav bar (dark blue) extends the full width of the body of the site?)

I don’t know how better to explain it.

So, I am hoping that you or someone can assist me in how to configure this within the relative CSS files for Iris.

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#257612

It should be enough to change to this here in template_css.css line 1075:

#ja-mainnav {
background-image:url(../images/navbg.gif);
background-repeat:repeat-x;
border-style:none;
bottom:0;
left:0;
position:absolute;
width:100%;
z-index:10;
}

1 user says Thank You to Menalto for this useful post

1. TomC

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#257647

Oh man, I knew it would be something as simple as “width: 100%”

THANK YOU !!!

:-[

[Menalto Friend MenaltoJoin date: May 2007Posts: 4736Downloads:0Uploads:43 Thanks: 2 Thanked: 531 times in 361 posts]

#257649

Yes it was in this case:p

[Author]

Posts