Adjusting Child Menu Width

Developer Support CMS Development
1

Hi, not a dev here. I have a very simple adjustment I would like to make to our website -- apartmentgeofencing.com.

I want to increase the width of the drop-down menu (desktop only).

Here is what it looks like currently:

PSewall_0-1690575655908.png
PSewall_0-1690575655908.png250×280 47.3 KB

In developer tools I see width 150px

PSewall_1-1690575861969.png
PSewall_1-1690575861969.png361×230 27.7 KB

Changing this to 200px; gives me the desired width:

PSewall_2-1690575926036.png
PSewall_2-1690575926036.png376×193 26.5 KB

Desired Result:

PSewall_3-1690575939103.png
PSewall_3-1690575939103.png257×231 32.6 KB

I am having a hard time located where in the theme files / CSS files to make this change, and I am new to Hubspot. I will contract someone to help, but would like to become more comfortable making minor adjustments like this on my own.

Any help would be great. Thank you!

2

Hi @PSewall,

the theme files are located in your theme folder which can be found in the Design-Tools(Marketing → Files&Templates → Design-Tools or Design Manager ).

If you don’t see this option contact an Admin from your Hub and request the rights for access to it.

Once you’re in the Design-Tools open the theme - according to the source code it should be inside the “intrinsic-digital” folder. Somewhere in this folder you should find a module folder with a module called navigation, header navigation or similar. Open it and you’ll find the CSS part you’re looking for in the module.css area.

Important: It seems that it’s is a custom theme set up by an agency - inform them that you’ve made some changes. Otherwise they might overwrite it if they update your theme

best,

Anton

3

Thanks, that was helpful. I found it and made the change!

4

To increase the width of the drop-down menu on your website, you’ll need to locate the relevant CSS code in the theme files betflik. Since you’re new to Hubspot, I recommend seeking assistance from a developer to help you find the correct CSS file and make the adjustment. Once you’re more familiar with it, you can start making minor adjustments on your own. Good luck!

5

Thanks, that was helpful. I found it and made the change! betflik45

6

To increase the width of a desktop drop-down menu:

  1. Find the CSS selector for the menu.
  2. Add a CSS rule to set the width.
  3. Optionally, use a media query to apply the change only on desktop screens.
  4. Test on different browsers.
  5. Update your betflix website/app code with the modified CSS.