JoomDev: Appointemnt button in the top menu (1/2)
Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: Appointemnt button in the top menu

Appointemnt button in the top menu 3 months 1 week ago #6703

  • pete
  • pete's Avatar
  • Offline
  • Junior Member
  • Posts: 38
  • Thank you received: 1
  • Karma: 0
Hi,

I noticed that the appointment button in the top menu moves to 2nd row at certain size of the browser. How to prevent it?

pete


The administrator has disabled public write access.

Appointemnt button in the top menu 3 months 1 week ago #6708

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 2036
  • Thank you received: 324
  • Karma: 55
Hi Peta,

Decrease the menu font size or spacing between the menu items.
www.screencast.com/t/22262emrE

Thanks,
Chandan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.

Appointemnt button in the top menu 3 months 2 days ago #6851

  • pete
  • pete's Avatar
  • Offline
  • Junior Member
  • Posts: 38
  • Thank you received: 1
  • Karma: 0
Hi,

decreasing the navigation font size didn't help. Still the same issue. How/where do I change the spacing or appointment button size?

Also, I noticed that the problems only occure, when browser page width is approx. 1020-1200

before and after it behaves OK.

Pete
The administrator has disabled public write access.

Appointemnt button in the top menu 3 months 2 days ago #6852

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 2036
  • Thank you received: 324
  • Karma: 55
Hi Pete,

If you have decreased the font-size. But no effect on the frontend. I suggest the clear the browser change. Sometimes the browser cache does this or you can use the below trick.

Add the below code in custom.css file
#sp-header{ height: auto; }
Path: TEMPLATENAME/css
Also, I noticed that the problems only occur, when browser page width is approx. 1020-1200
This is a normal behavior.

Thanks,
Chandan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.

Appointemnt button in the top menu 3 months 8 hours ago #6876

  • pete
  • pete's Avatar
  • Offline
  • Junior Member
  • Posts: 38
  • Thank you received: 1
  • Karma: 0
Hi,

there is no file custom.css in templates/ jd-medical/css
do I create one?
Also, I noticed that the problems only occur, when browser page width is approx. 1020-1200
This is a normal behavior.

maybe I wasn't clear.
  • if browser width is more then 1200, then all is fine, all in one line. (see the first image bellow).
  • when the browser width is 1020-1200, the appointment button moves to 2nd line, and it doesn't look good.
  • when the browser width is just bellow 1020, the appointment button moves back to 1st line as expected.
  • when the browser width is bellow 1000, the menu colapses to button. this is expected.

thanks,
pete
The administrator has disabled public write access.

Appointemnt button in the top menu 3 months 1 hour ago #6888

  • admin
  • admin's Avatar
  • Online
  • Administrator
  • Posts: 899
  • Thank you received: 140
  • Karma: 25
Hi Pete,

If the custom.css file doesn't exist. Go ahead and create once and it will automatically be included.

As mentioned in the original post by Chandan. The Appointment button is just another menu item and the reason it goes in 2 lines is because of the font size and the padding between menu items. You have adjust that in order for the menu to stay in one line or you can opt for less number of menu items and that will also make sure it stays in one line on the preferred screen size.

Thanks,
Chetan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.

Appointemnt button in the top menu 2 months 2 weeks ago #7044

  • pete
  • pete's Avatar
  • Offline
  • Junior Member
  • Posts: 38
  • Thank you received: 1
  • Karma: 0
Hi,
the custom css only partially solved the problem. I mean, it works better, but it's not nice...

Can I ask for suggestions for 2 scenarios:
1. change padding. I tried to change font but it didn't chagne anything. Where do I change padding for the menu?

2. I don't like that when I resize the page to smaller width, the menu goes from 1 line to 2 lines, then back to 1 line and then to the compressed. Can I change it to go straight to the compress version instead of making 2 lines?

thanks,
pete
The administrator has disabled public write access.

Appointemnt button in the top menu 2 months 2 weeks ago #7053

  • Lalit Kumar
  • Lalit Kumar's Avatar
  • Offline
  • Moderator
  • Posts: 14
  • Thank you received: 3
  • Karma: 0
Hello,

1. this is current padding in this selector

.sp-megamenu-parent li a {
padding: 0 15px;
}

You Can Change this value in your css.

Thanks,
Lalit Kumar
The administrator has disabled public write access.

Appointemnt button in the top menu 2 months 1 week ago #7117

I'm also dissatisfied with the menu button dropping down on browser resize. How do we go about forcing the mobile view to show at a larger browser size?
The administrator has disabled public write access.

Appointemnt button in the top menu 2 months 1 week ago #7129

  • Lalit Kumar
  • Lalit Kumar's Avatar
  • Offline
  • Moderator
  • Posts: 14
  • Thank you received: 3
  • Karma: 0
Hello,

You need this in your custom.css file.
@media only screen and (min-width:992px) and (max-width:1199px) {
	.sp-megamenu-parent >li >a, .sp-megamenu-parent >li >span {
    		padding: 0 12px;
	}
}
Thanks,
Lalit
Last Edit: 2 months 1 week ago by admin. Reason: code formatting
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Time to create page: 0.403 seconds