Joomla Templates Club 406,261 posts

[nathanlgv4u Friend nathanlgv4uJoin date: August 2014Posts: 63Downloads:0Uploads:22 Thanks: 24]

#201927

Ok so i have been asked to see if i can drop the menu buttons down on this page, (ideally then centre them) and put a banner above that again ideally centred. is this possible?

if so please help and speak slowly as i’m a n00bie

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

#552327

Try This . . . .

If you have not yet done so, create a new file called “custom.css” within file path –> /templates/ja_sugite/css/

Within that custom.css file, paste the following CSS rules:


.navbar-nav {
float: left;
}

.nav > li {
top: 20px;
}

This will center and lower your main nav items.

What kind of banner are you wanting to put above your main nav items?
This will determine how to further modify the header section.

1 user says Thank You to TomC for this useful post

1. nathanlgv4u

[nathanlgv4u Friend nathanlgv4uJoin date: August 2014Posts: 63Downloads:0Uploads:22 Thanks: 24]

#552378

Hey Tom thanks for this! I did already have the custom in place, the banner will ideally stretch along the top and will be inline with the body of the site.

As it stands the main banner i have is 782 x 187 px. I do also have a mobile banner abailable at 102 x 24

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

#552429

<em>@nathanlgv4u 449336 wrote:</em><blockquote>Hey Tom thanks for this! I did already have the custom in place, the banner will ideally stretch along the top and will be inline with the body of the site.

As it stands the main banner i have is 782 x 187 px. I do also have a mobile banner abailable at 102 x 24</blockquote>

So you’re okay with increasing the height of the header section … and then modifying things from there, yes?

[nathanlgv4u Friend nathanlgv4uJoin date: August 2014Posts: 63Downloads:0Uploads:22 Thanks: 24]

#552430

Yeah,

I have actually put in the banner, I think the last changes i need to make is to center the links and the banner…

I’d also be interested to know if its possible to change the font/size/color of the links on the nav bar 🙂

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

#552432

Might you be able to throw together a quick screenshot mock-up of exactly what you’re wanting it to look like?

I can then better assist you in how to achieve it.

1 user says Thank You to TomC for this useful post

1. nathanlgv4u

[nathanlgv4u Friend nathanlgv4uJoin date: August 2014Posts: 63Downloads:0Uploads:22 Thanks: 24]

#552492

Hey,

Here is the ideal of what i am aiming for. I’d also be interested to know if you can add like an emphasis nav button in the bar at the top (ie book now that’s a different color and stands out). I was also trying to figure out how to change the style/font of the nav bar buttons along the top.

---

Attachments:

1. 

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

#552534

Try The following . . . .

Modify the following CSS rule within your custom.css file (line 8) as follows::


.logo-image img {
padding-left: 150px;
transition: none 0s ease 0s ;
}

and at line 16:


.t3-header {
background: none repeat scroll 0 0 #1f1f1f
height: 280px;
padding-bottom: 10%;
padding-top: 0.6%;
}

and, finally, at line 1:


.navbar-nav {
float: left;
margin-left: -75px;
width: 700px;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

How does that look?

1 user says Thank You to TomC for this useful post

1. nathanlgv4u

[nathanlgv4u Friend nathanlgv4uJoin date: August 2014Posts: 63Downloads:0Uploads:22 Thanks: 24]

#553102

Thanks Tom fantastic

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

#553103

Glad I could be of assistance . . . . All the best with your continuing site development. 🙂

1 user says Thank You to TomC for this useful post

1. nathanlgv4u

[Author]

Posts