Joomla Templates Club 406,261 posts

[halilibrahimkar Friend halilibrahimkarJoin date: May 2012Posts: 25Downloads:0Uploads:6 Thanks: 7 Thanked: 1 times in 1 posts]

#177350

Hi,

My category name is a few long. it is ending “…” . So i want to change sidebar`s and logo`s “width” together.
I tried it on “layout.css” .sidebar. But category name just slide to right. Background didnt change. So it was bad screen.

Thx,

[cssyeah Moderator cssyeahJoin date: June 2006Posts: 653Downloads:73Uploads:15 Thanked: 121 times in 81 posts]

#454129

Hi halilibrahimkar,

If you want to change the width of the sidebar, you do some steps.

Step 1: Increase padding of the container.
– Open the layout.css file and change padding of the container


body.has-sidebar #container .container-main {
padding-left: 120px; /* Increase this width */
}


Step 2: Increase width of the Sidebar.
– In the layout.css file, you find the following css code section:


#sidebar {
...
width: 120px; /* Increase this width */
}


Tell me if it does not work.

[halilibrahimkar Friend halilibrahimkarJoin date: May 2012Posts: 25Downloads:0Uploads:6 Thanks: 7 Thanked: 1 times in 1 posts]

#454154

thx. but i do this before when i create this topic.

Result Screen

---

Attachments:

1. 

[cssyeah Moderator cssyeahJoin date: June 2006Posts: 653Downloads:73Uploads:15 Thanked: 121 times in 81 posts]

#454163

Sorry you,

You need change the “margin-left: ???px;” in the following css code section.


#sidebar {
margin-left: ???px; /* Change the same your width */
...
width: ???px; /* Increase this width */
}


Thanks.

1 user says Thank You to cssyeah for this useful post

1. freissmann

[halilibrahimkar Friend halilibrahimkarJoin date: May 2012Posts: 25Downloads:0Uploads:6 Thanks: 7 Thanked: 1 times in 1 posts]

#454174

thx, i did. But i see “…” again. I added an image.

body.has-sidebar #container .container-main {
padding-left: 150px; /* Increase this width */
}

#sidebar {
margin-left:-150px; /* Change the same your width */
...
width: 150px; /* Increase this width */
}

Also;

template.css

#logo {
...
width: 150px;
...
}


navigation.css

#mainnav {
left: 150px;
...
}

image:

---

Attachments:

1. 

[halilibrahimkar Friend halilibrahimkarJoin date: May 2012Posts: 25Downloads:0Uploads:6 Thanks: 7 Thanked: 1 times in 1 posts]

#454179

or when mouse hover menu, can it slide left to right? as mobile phone`s solution for long music, document`s names.

[cssyeah Moderator cssyeahJoin date: June 2006Posts: 653Downloads:73Uploads:15 Thanked: 121 times in 81 posts]

#454193

Hi,

Open the template.css file and find this css code section.


#sidebar .menu li a {
...
max-width: 100px; /* Change to 140px */
...
}


🙂

1 user says Thank You to cssyeah for this useful post

1. halilibrahimkar

[ncase Friend ncaseJoin date: February 2010Posts: 15Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#455387

You will also want to update the layout-tablet.css for the “mid size” responsive layout (the one where the sidemenu becomes a dropdown button but before the logo jumps to the top)

#mainnav {
left: (add however many pixels you added to sidebar)
padding-left: (remove however many pixels you added to sidebar)
}

Cheers,
Case

1 user says Thank You to ncase for this useful post

1. halilibrahimkar

[halilibrahimkar Friend halilibrahimkarJoin date: May 2012Posts: 25Downloads:0Uploads:6 Thanks: 7 Thanked: 1 times in 1 posts]

#455511

<em>@ncase 322733 wrote:</em><blockquote>You will also want to update the layout-tablet.css for the “mid size” responsive layout (the one where the sidemenu becomes a dropdown button but before the logo jumps to the top)

#mainnav {
left: (add however many pixels you added to sidebar)
padding-left: (remove however many pixels you added to sidebar)
}

Cheers,
Case</blockquote>

I try this but there was some problem. Please, try bottom code.

For tablet, change layout-tablet.css

#mainnav .menu-inner {
left: 165px; (add however many pixels you added to sidebar)
right: 255px;
}

Thats OK.

[halilibrahimkar Friend halilibrahimkarJoin date: May 2012Posts: 25Downloads:0Uploads:6 Thanks: 7 Thanked: 1 times in 1 posts]

#455512

<em>@Pixel Shot 321240 wrote:</em><blockquote>Hi,

Open the template.css file and find this css code section.


#sidebar .menu li a {
...
max-width: 100px; /* Change to 140px */
...
}


:)</blockquote>

Also change for subcategories


#sidebar .menu ul li a {
max-width: 70px; (change here)
}

[Sanyam Jain Friend Sanyam JainJoin date: September 2014Posts: 27Downloads:0Uploads:2 Thanks: 8 Thanked: 1 times in 1 posts]

#463118

its not working for me! :((

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#463141

Hi orangeinfomedia,

Have you follow all advice suggest by Pixel Shot?
Please pm me your site and access information (ftp/admin) so I can take a look.

Regards

[Author]

Posts