How do I alter the flash sales banner and drop down menu in DAWN?

Store Design
1

Dear all i need your hel for the following.

At this site www.lumiyaskin.com I need to:

1.FLASH SALE BANNER: I need to change the text -color.

  1. DROP DOWN MAIN MENU:In the drop down menu placed into the header I need to make larger the menu frame when you see all product list. This because the text is quite long and it returns to next line. I i would like to fix product title text on unique line only

Thanks in advance for you help.

2

Hello @Ereki84

It a grae pleasure to have you here,

To edit your call to action button (CTA)

  1. From the Shopify admin tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage themes.

  4. Find the theme that you want to edit, and then tap Customize.

  5. Tap Edit.

  6. Click Theme settings.

  7. Click Colors.

  8. Edit the setting that affects the background color and the setting that affects the text color of the dynamic checkout button. The specific settings vary from theme to theme.

  9. Click Save.

Regards the second question

  1. From the Shopify app, tap Store.

  2. In the Sales channels section, tap Online Store.

  3. Tap Navigation.

  4. Click the name of your main menu.

  5. Choose one of the menu items to be the header for your drop-down menu, or add a new menu item to be the header. If you don’t want the header to link to anything, then you can enter # in the Link field when you add the menu item.

  6. Add menu items to include in the new drop-down menu. Click Add menu item, enter the name of the menu item and enter or select a destination for the link.

  7. Click and drag the menu items to nest below the header item.

  8. Click the Save menu.

If the suggestion is welcome don’t forget to hit the LIKE button and mark it as a SOLUTION

IF YOU HAVE ANY OTHER COMPLAINTS, DON’T HESITATE TO CONTACT US

Thanks.

3

Hi, @Ereki84

You can try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset-> base.css ->paste the below code at the bottom of the file.
.announcement-bar__message {
    color: #CCB299;
}

.list-menu--disclosure{
    width: 40rem;
}
4

Sorry but the second solution seems not to work. If i put an existing menu title from the sub root catalogue menu I can see it well because it turns into a main menu on top.
When I drag again this product title in the menu “CATALOGUE” with others the situation comes back to previous status and the text string return to next line…

5

Hi,

To change the announcement-bar text color and dropdown menu width, please add the code below to Assets/base.css file.

.announcement-bar__message {
  color: #000;
}
.header__submenu {
  width: max-content;
}

You can change the color hex code above to fit your need. The hex code #000 is black.

If you want to change the announcement-bar text font size or weight, you may add addition coding as below. The current font size is 14px (default), font weight is 400 (default & regular - bold for 600 or 700), and the font family (font face) is default (can be changed to your header font family).

You can modify it as below.

.announcement-bar__message {
  color: #000;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-heading-family);
}

If you have any other questions, please let me know.

Hope it helps.

Thanks.

6

I don’t want to change the text size read above.

7

Then just use the first code! Read my reply!!!

Shopify Partners are volunteers. Please don’t be rude!

.announcement-bar__message {
  color: #000;
}
.header__submenu {
  width: max-content;
}

THANKS!!!

8

@Ereki84 read the first suggestions, all that you needed has been explaining no need for editing code, don’t even dear torching the section if you’re not an expert in that field.

Because a single mistake can crumble your store. NOTE THAT

Just follow the simple logic or contact @folawe

Thanks.

9

modiying the following as you said:
/* Header Menu and Sub Menu item Color */
.header__menu-item span, .header__submenu .header__menu-item, .header__menu-item .icon-caret
{
color: #b07c6e ;

Schermata 2022-08-07 alle 10.55.jpg
Schermata 2022-08-07 alle 10.55.jpg1950×682 55 KB

width: max-content;
}

this is the result

10

AT the end I could make it modifying the following code:

.global-settings-popup,
.header__submenu.global-settings-popup {
border-radius: var(–popup-corner-radius);
border-color: rgba(var(–color-foreground), var(–popup-border-opacity));
border-style: solid;
border-width: var(–popup-border-width);
box-shadow: var(–popup-shadow-horizontal-offset) var(–popup-shadow-vertical-offset) var(–popup-shadow-blur-radius) rgba(var(–color-shadow), var(–popup-shadow-opacity));
width: max-content;
}

The problem is (and i don’t remember if it was like this before) when you open the sub menu and move the mouse outside the submenu doesn’t close automatically but you need to click outside of the menu.