Icon on Header dropdown and dynamic website width

Hello,

First question I have is I would like to know how to add icons to the header drop down list as the image below, in addition, I would also like to know how to edit the size and fonts of the drop down.

Secondly,

When my web page window is not englarged, the containers in my website gets bunched up as in the picture shown below, is there any way to fix this? I would like it so that the sizing stays completely the same regardless of window size, and the side bar will either go to the bottom if there is no space, and they have to manually scroll right.

Thank you!

Hello There,

Thanks for writing in!

1.) You can add an icon to the menu items by adding the icon code in Appearance > Menus > edit your menu.
Please check out this thread for more information: https://theme.co/apex/forum/t/how-can-i-add-icons-to-my-top-menu/27948/6

2.) Could you please send us the url of your site so that we can take a closer look?

Regards.

Hi RueNel,

  1. What about changing the size of the dropdown in the header? I would like to increase the size of the word.

  2. My website is www.firemillionaire.com

  3. I also have a new question, i would like my head bar width to stay the same, but the content width to shrnk. Is there any way to do this?

Thank you very much for the help

Hello There,

Thanks for updating in!

1.) To increase the font size of the submenu items, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar .sub-menu {
    font-size: 14px;
}

2.) To change the width of your navbar, you can make use of this code:

.x-navbar .x-container.max.width {
    max-width: 1000px;
}

We would loved to know if this has work for you. Thank you.

Hi RueNel,

Thank you for the prompt response.

With regards to number 2) it was refering to the original post quoted here “When my web page window is not englarged, the containers in my website gets bunched up as in the picture shown below, is there any way to fix this? I would like it so that the sizing stays completely the same regardless of window size, and the side bar will either go to the bottom if there is no space, and they have to manually scroll right.”

In addition, I would like to change the content width, and not the header width of the site. I would like to keep the header the same, while shrinking the content width.

I tried using this code, but it pushes everything to the left instead of adjusting both sides.

.x-main {
max-width: 1400px;

}

Please let me know if you can help!

Thank you!

Hello There,

The issue shown in the screenshot is because there aren’t enough space to display its contents. To resolve this, please make sure that the “Let’s Connect” text element has a line height of at least 1em. At the moment, it is set to 0 which is causing the issue. The anchor buttons has a negative left margin which is also causing a problem. Please set the margin correctly.

Hope this helps.

Hello there,

I don’t believe that is the case. If you look below at the screen shot, you can see the social media icon messing up, and as well as the categories container being messed up.

I would like the sizing of the container to stay the same regardless of the window size.

Can you please provide any suggestions?

Thank you.

Hi Eric,

That is exactly the cause of the problem which my colleague mentioned. I changed the line height to 1em in my browser console and it worked correctly:

I think the way you added the widgets are not correct. I suggest that you add a Global block with all the goodies of the Cornerstone to create the content that you want.

After that use the Custom HTML widget to add the Global Block generated shortcode there:

By that, you will have all the control over the styling and controls.

Thank you.

Hi Christopher,

Thank you for the response. However, if you look at the screen shots below, you will see that is not the issue. I would like to containers to remain the same regardless of the window size. Here you can see the words are fixed now, but the social icon goes out of place when i narrow down the window.

I apologize if i didnt explain clearly, but I want the size of the container to stay the same, regardless if my window is maximized or smaller. Hope you can help.

Thank you!

Hi @firemillionaire

The problem is within the negative margin values you have added to these anchor items, adding this CSS snippet to (X > Theme Options > CSS) should fix it:

@media screen and (max-width: 1300px){
    .x-column.x-sm .x-anchor-button {
        margin: 0 auto;
    }
}

Thanks.

Hi Alaa,

Thank you for the response. Your fix did indeed make it better, however, I was wondering if there is anyway I can keep the container sizes the SAME regardless of the window size?

For example, if the width of the side bar is 300px, when I make the window smaller, I still want it to remain at 300px.

Cheers,
Eric

Hi there,

Please add this CSS too


    @media ( min-width: 768px ) {
    .fixed-right-col {
     width: 300px !important;   
    }

.fixed-left-col {
width: calc(96% - 300px) !important;
}
    }

Then inspect the left column and add fixed-left-col to its Class input field. And inspect the right column and add fixed-right-col to its Class input field. Class option are available in Customize section once you inspect those columns.

Thanks!

Hello Rad,

Awesome! This worked perfectly.

However, just one more issue now, when I make my window smaller now, something weird is happening to one of the container, image below,

The container has a big of white box above it now, and only happens when the window is minimized.

Do you know what is causing this issue ?

Thank you for the help!
Eric

Hi Eric,

It’s the top margin of your text element that is causing the issue.

Please set it to zero and add padding-top.

eg.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.