fbpx
Welcome, Guest
Username: Password: Remember me

TOPIC: (SOLVED)Search box size change & Logo position

Search box size change & Logo position 1 year 8 months ago #21740

  • dikontog
  • dikontog's Avatar
  • Offline
  • New Member
  • Posts: 9
  • Karma: 0
Hello,
1) is it possible to change the dimensions of the "search" box and also make them "fixed"? Please note that I'm using the "boxed layout" option for the template.
2) how can I place the logo at the center of the page and be responsive for tablet / phone?

Please help. :blink:
Thank you!
Last Edit: 1 year 8 months ago by dikontog.
The topic has been locked.

Search box size change & Logo position 1 year 8 months ago #21741

  • Lalit Kumar
  • Lalit Kumar's Avatar
  • Offline
  • Moderator
  • Posts: 781
  • Thank you received: 101
  • Karma: 27
Hello,

1. Search Box is aslo fixed & what's you mean by dimensions? Please explain in detail.
2. Add the Following CSS in custom.css file

@media (max-widh: 991px) {
.logo-image {
margin: auto;
}
}

Path: JoomlaRoot/templates/css/custom.css
Note: If you will not get a custom.css file here, so you have to create a custom.css file yourself.

Thanks,
Lalit
Thank You,
If you like our support and products, tweet us at JoomDev and let the world know about it.
The topic has been locked.

Search box size change & Logo position 1 year 8 months ago #21751

  • dikontog
  • dikontog's Avatar
  • Offline
  • New Member
  • Posts: 9
  • Karma: 0
Thank you for your kind and prompt reply. Issue 2 fixed with code. :woohoo:

Issue 1: Please see below the attached pics. On first one, there is the search box with no text written inside and everything stays in place. On pic 2, I wrote something on the search box, and the entire page is pushed, creating a white area on the right. I hope my description will help you to understand the problem.
Basically I would like the same functionality of the search box as the one of the JD NewJersey template. What changes should I make?

Thank you!
Attachments:
The topic has been locked.

Search box size change & Logo position 1 year 8 months ago #21826

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 4614
  • Thank you received: 652
  • Karma: 116
Hello,

Please follow the steps:
1. Open the search module and change the Layout from modal to Default.
2. create a custom.css file in css folder and save the attached code in it.

Path: templates/TEMPLATENAME/css

header#sp-header #sp-search .search {
   right: 0;
   background: none;
   width: auto;
   position: relative;
}

header#sp-header #sp-search .search input{
   width: 120px; /* Set default width area */
   margin-left: auto;
   transition: all 0.5s ease-out;
}

header#sp-header #sp-search .search input:focus{
   width: 180px; /* Increase width area according to your need */
}

Thanks,
Chandan
Attachments:
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
The topic has been locked.
The following user(s) said Thank You: dikontog

Search box size change & Logo position 1 year 8 months ago #21871

  • dikontog
  • dikontog's Avatar
  • Offline
  • New Member
  • Posts: 9
  • Karma: 0
Thank YOU! :)
The topic has been locked.

Search box size change & Logo position 1 year 8 months ago #21876

  • Lalit Kumar
  • Lalit Kumar's Avatar
  • Offline
  • Moderator
  • Posts: 781
  • Thank you received: 101
  • Karma: 27
Perfect! your issue is resolved now, it would be amazing if you could tweet about your experience with us on our twitter handle: twitter.com/joomdev

Thanks,
Lalit
Thank You,
If you like our support and products, tweet us at JoomDev and let the world know about it.
The topic has been locked.
Moderators: chandandeep
Time to create page: 0.432 seconds
Cron Job Starts