Joomla Templates Club 406,261 posts

[mkfloresca Friend mkflorescaJoin date: November 2014Posts: 57Downloads:11Uploads:15 Thanks: 16]

#205635

Can anyone help in breaking my main menu into two lines if they are too long? The English menu alone is a bit long and the the German translation is even longer.

Will the modification happen here on either one:
custom.css below:
.navbar-default .navbar-nav > li > a:last-child {
padding: 15px;
}
template.css below:
.navbar-default .navbar-nav > li > a {
border-right: 1px solid #1f537e
color: #eaf1f7
font-size: 13px;
font-weight: bold;
padding: 15px 20px;
text-transform: uppercase;

Any help is appreciated.

Thanks,
Karla

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#567466

your website Url please

[mkfloresca Friend mkflorescaJoin date: November 2014Posts: 57Downloads:11Uploads:15 Thanks: 16]

#567491

<em>@Chavan 469222 wrote:</em><blockquote>your website Url please</blockquote>

Hi,
I will PM you info as dev site is restricted.

Thanks,
Karla

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#567539

Add this code to /templates/ja_university_t3/local/css/themes/blue/custom.css

.navbar-default .navbar-nav > li > a{
padding:15px 5px !important;
}

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#732649

Add this code to /templates/ja_university_t3/local/css/themes/blue/custom.css

.navbar-default .navbar-nav > li > a{
padding:15px 5px !important;
}

[mkfloresca Friend mkflorescaJoin date: November 2014Posts: 57Downloads:11Uploads:15 Thanks: 16]

#567548

<em>@Chavan 469353 wrote:</em><blockquote>Add this code to /templates/ja_university_t3/local/css/themes/blue/custom.css

.navbar-default .navbar-nav > li > a{
padding:15px 5px !important;
}
</blockquote>

Hi,

Thank you for the suggestion. However, I do want to have the longer menu items to wrap-around the padding like so:
“Member’s
Log In”

or
“Working in
the Phils”

Thanks,
Karla

[mkfloresca Friend mkflorescaJoin date: November 2014Posts: 57Downloads:11Uploads:15 Thanks: 16]

#732658

<em>@Chavan 469353 wrote:</em><blockquote>Add this code to /templates/ja_university_t3/local/css/themes/blue/custom.css

.navbar-default .navbar-nav > li > a{
padding:15px 5px !important;
}
</blockquote>

Hi,

Thank you for the suggestion. However, I do want to have the longer menu items to wrap-around the padding like so:
“Member’s
Log In”

or
“Working in
the Phils”

Thanks,
Karla

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#567622

please post us a screenshot how you want the spacing to be placed.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#732732

please post us a screenshot how you want the spacing to be placed.

[mkfloresca Friend mkflorescaJoin date: November 2014Posts: 57Downloads:11Uploads:15 Thanks: 16]

#567653

<em>@Chavan 469448 wrote:</em><blockquote>please post us a screenshot how you want the spacing to be placed.</blockquote>

Here are the screen shots:

The red box is just an indicator of what I am trying to accomplish, not part of the menu.

Prefer the menu to be on one line with the longer main menu items be wrapped (two lines) based on the width and height.

Thanks,
Karla

---

Attachments:

1. 
2. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#567973

herewith attached a screenshot, If you want the menu to look like this.

please add the following code to custom.css

.navbar-default .navbar-nav > li > a{
font-size:12px !important;
padding: 15px 6px !important;

}

---

Attachments:

1. 

1 user says Thank You to chavan for this useful post

1. mkfloresca

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#733079

herewith attached a screenshot, If you want the menu to look like this.

please add the following code to custom.css

.navbar-default .navbar-nav > li > a{
font-size:12px !important;
padding: 15px 6px !important;

}

1 user says Thank You to chavan for this useful post

1. mkfloresca

[Author]

Posts