In Dawn Theme, add button to right side of header on desktop, but remove or make look good on mobile

[delicioats]

Hello! I’m using Dawn 13.0.0, trying to add a button to the right side of the header. I’ve spent hours finding different versions of code from very helpful posts and YouTube videos that successfully do this, but none yet that also address the issue I’m having with how it appears on mobile.

I’ve added the following code to my base.css file to get the last menu item to appear as a button:

    .header  .header__inline-menu .list-menu > li:last-child > a{
    	background: #446FDA;
    	border-radius: 10px;
    	text-decoration: none !important;
    	padding-left: 20px;
    	padding-right: 20px;
    	color: #fff!important;
}
.header  .header__inline-menu .list-menu > li:last-child > a span {
	text-decoration: none;
	color: #fff;
}
body .header__inline-menu .list-menu > li:last-child > a:hover {
		background: #5E89F6;
}
.menu-drawer__navigation .menu-drawer__menu > li:last-child {
	padding: 0rem;
}
.menu-drawer__navigation .menu-drawer__menu > li:last-child a{
	background: #446FDA;
	border-radius: 10px;
	color: #fff!important;
	justify-content: center;
}

This looks nice, and the button doesn’t appear on mobile unless you open the menu, which is fine. But I want the button to appear on the right side of the header on desktop (next to the search icon) rather than in line with the rest of the menu items.

I added the following code under the code shown above to accomplish this:

.header__inline-menu {
	display: block;
}
@media screen and (min-width: 990px) {
	body .header--middle-left {
		grid-template-columns: auto 1fr;
	}
	body .header__inline-menu .list-menu--inline{
		min-width: 100%;
	}
	body .header__inline-menu .list-menu--inline > li:last-child {
		margin-left: auto;
	}
}
@media screen and (max-width: 989px) {
	body .header__inline-menu .list-menu--inline > li {
		display: none;
	}
	body .header__inline-menu .list-menu--inline > li:last-child  {
		display: block;
	}
	body .header {
			grid-template-areas: "left-icons heading navigation icons";
			grid-template-columns: 1fr 2fr;
	}
	body #menu-drawer .menu-drawer__navigation .menu-drawer__menu > li:last-child {
		display: none;
	}
}

But after adding it the button also appears on mobile and partially overlaps my logo:

I’d like to have the button appear on the right of the header on desktop (see screenshot below), but appear only in the menu on mobile. Or appear in a more attractive way in the header on mobile so that it doesn’t overlap my logo.

My website is www.delicioats.com. It’s public, so no password needed.

Any help would be very much appreciated.

[MastersHub]

Do you still need help? When I look at it now, there is no conflict.

[Ritu-25]

Hello @delicioats ,

Please add this css in base.css file.

.header--middle-left {
    grid-template-columns: auto 1fr 0fr;
}
.header__inline-menu .list-menu.list-menu--inline {
    width: 100%;
}
.header__inline-menu .list-menu.list-menu--inline li:last-child {
    flex: 1;
    display: flex;
    justify-content: end;
}

Once you save it then it will look like this:

Thanks,

Ritu

[delicioats]

I did still need help, thank you for checking in! Ritu-25’s solution worked, so I am all set now. Thanks again!

[delicioats]

@Ritu-25 thank you so much, this is the shortest version of code that accomplishes what I’m trying to do that I have seen (and at this point I’ve seen about half a dozen ways of doing it). It’s also the only one that does it just like I asked.

The only thing it didn’t do was make it appear as a button. Once I commented out the custom code I was using previously and replaced it with yours, it appeared as the regular menu item, rather than as the blue button I had it as before. But I added the following code form what I’d used previously in order to make it appear as a blue button both on desktop and in the drawer menu on mobile:

.header  .header__inline-menu .list-menu > li:last-child > a{
    	background: #446FDA;
    	border-radius: 10px;
    	text-decoration: none !important;
    	padding-left: 20px;
    	padding-right: 20px;
    	color: #fff!important;
}
.menu-drawer__navigation .menu-drawer__menu > li:last-child a{
	background: #446FDA;
	border-radius: 10px;
	color: #fff!important;
	justify-content: center;

Thank you so much!

[BrunoWK]

Hi there! It kinda worked for me, but i wanted it to go beyond my logo, so it would look like the picture below. What would i need to edit in the code? Thanks!

[BrunoWK]

Hi, this worked well for me, but the itens inside the menu drawer also go to the side, is there a fix for this? see image