Navigation and drop down menu items

Site URL: https://www.earthdrivencollective.com.au/home

Hi again! Need help on this. Client wants the gap to be less in between the navigation items and content (photos). I'm thinking the only way to do that is to:

1. Decrease the height between the (1) main navigation and drop down menu items and

2. Decrease the height between the drop down items

3. Make the fonts of the drop down menu items smaller

Then after that I can adjust the padding between the navigation and content.  Does anyone know the codes for the three adjustments above? 🙂

Or any suggestions to make it work?  

Ideally, client doesn't want a big space between navigation and content. Is there any way to do that once we add more items in the drop down menu?  

Add to Home > Design > Custom CSS

.Header-nav-folder {
    padding-top: 0;
    font-size: 10px;
}

Hi @tuanphan,

In my drop down menu I have the css code to custimize size of the dropdown menu however I want the background to auto adapt to the texts size, is that possible? Because some page names are long and some short for example. do i have to edit each header tittle? if so how?

https://collie-collie-pedb.squarespace.com/

pw: gkoustascare123

7 minutes ago, theokoustas said:

Hi @tuanphan,

In my drop down menu I have the css code to custimize size of the dropdown menu however I want the background to auto adapt to the texts size, is that possible? Because some page names are long and some short for example. do i have to edit each header tittle? if so how?

 

https://collie-collie-pedb.squarespace.com/

pw: gkoustascare123

Find this code in Custom CSS box

.header-nav .header-nav-item--folder .header-nav-folder-content {
    width: 256px
}

edit to

.header-nav .header-nav-item--folder .header-nav-folder-content {
    width: auto;
}
.header .header-nav-wrapper a {
    white-space: nowrap;
}

3 minutes ago, tuanphan said:

Find this code in Custom CSS box

.header-nav .header-nav-item--folder .header-nav-folder-content {
    width: 256px
}

edit to

.header-nav .header-nav-item--folder .header-nav-folder-content {
    width: auto;
}
.header .header-nav-wrapper a {
    white-space: nowrap;
}

 

Your a life saver man! Thank you so much. Last question, Is it possible within the dropmenu,

1) to have thin line borders around the content in the drop down menus, so theres a seperation/distinction between each page because there is quite a few pages in each dropdown (eachword)? 

2)If so, High light the background color when hovering instead of the words changing color? 

8 minutes ago, theokoustas said:

Your a life saver man! Thank you so much. Last question, Is it possible within the dropmenu,

1) to have thin line borders around the content in the drop down menus, so theres a seperation/distinction between each page because there is quite a few pages in each dropdown (eachword)? 

2)If so, High light the background color when hovering instead of the words changing color? 

Add to Home > Design > Custom CSS

/* Remove dropdown padidng */
.header-nav-folder-content {
    padding: 0 !important;
}
/* add border */
.header-nav-folder-item {
    padding: 5px;
    border-bottom: 1px solid green;
}
/* change bg on hover */
.header-nav-folder-item:hover {
    background: red;
}

4 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

/* Remove dropdown padidng */
.header-nav-folder-content {
    padding: 0 !important;
}
/* add border */
.header-nav-folder-item {
    padding: 5px;
    border-bottom: 1px solid green;
}
/* change bg on hover */
.header-nav-folder-item:hover {
    background: red;
}

 

To border  left and right each word(content) ? Lastly how do I center the text in the dropdown menu so its not formated to be on the right of the dropdown box. 

Just now, theokoustas said:

To border  left and right each word(content) ? Lastly how do I center the text in the dropdown menu so its not formated to be on the right of the dropdown box. 

 

edit border-bottom: 1px solid green; to border: 1px solid green;

.header-nav-folder-item {
    text-align: center;
}

11 minutes ago, tuanphan said:

edit border-bottom: 1px solid green; to border: 1px solid green;

.header-nav-folder-item {
    text-align: center;
}

 

Everything worked thank yo so much!! I know this is a  different question, but ive added this css code:

[data-section-id="5e73347bc0821f49f60360e0"] .image-block:hover  img {
    filter: blur(6px) !important;
}

To blur the images in this specific section of the page. How can I remove the hover effect in mobile version for this section?

1 minute ago, theokoustas said:

Everything worked thank yo so much!! I know this is a  different question, but ive added this css code:

[data-section-id="5e73347bc0821f49f60360e0"] .image-block:hover  img {
    filter: blur(6px) !important;
}

To blur the images in this specific section of the page. How can I remove the hover effect in mobile version for this section?

edit code to

@media screen and (min-width:991px) {
[data-section-id="5e73347bc0821f49f60360e0"] .image-block:hover  img {
    filter: blur(6px) !important;
}
}

16 hours ago, tuanphan said:

edit code to

@media screen and (min-width:991px) {
[data-section-id="5e73347bc0821f49f60360e0"] .image-block:hover  img {
    filter: blur(6px) !important;
}
}

 

Hello Again,

In the mobile version, how come if I drag the site left or right from anywhere on the site, the whole site moves, and u can see the padding etc. I want it to be stable and not dragable only be vertically scrollable and thats it. Do you know what I mean? E.g this is me draging it to the left.= and then it gets stuck there as well...

4 minutes ago, theokoustas said:

Hello Again,

In the mobile version, how come if I drag the site left or right from anywhere on the site, the whole site moves, and u can see the padding etc. I want it to be stable and not dragable only be vertically scrollable and thats it. Do you know what I mean? E.g this is me draging it to the left.= and then it gets stuck there as well...

There is something wider than mobile width, try adding this to Home > Design > custom CSS

@media screen and (max-width:767px) {
#page {
    overflow: hidden;
}
}

3 hours ago, tuanphan said:

@media screen and (max-width:767px) { #page { overflow: hidden; } }

Thanks again,

In the navigation bar, When I hover over the navigation bar over one header, can the other headers get greyed out? like here : https://www.heenapatelpodiatry.com/holistic-treatments

hi @tuanphan my dropdown menu items are suddenly going out of the dropdown menu instead of falling to the next line. do you know how to fix this?

reference: truemedical.sg

On 1/26/2021 at 1:28 AM, pottedplant77 said:

hi @tuanphan my dropdown menu items are suddenly going out of the dropdown menu instead of falling to the next line. do you know how to fix this?

reference: truemedical.sg

Looks fine here. Do you still need help?

7 minutes ago, tuanphan said:

Looks fine here. Do you still need help?

Yes i extended the dropdown width to be 280px in the meantime. Is there a way for it to automatically enter to the next line when its too long?

On 2/2/2021 at 4:33 PM, pottedplant77 said:

Yes i extended the dropdown width to be 280px in the meantime. Is there a way for it to automatically enter to the next line when its too long?

Use this

.header-nav .header-nav-item--folder .header-nav-folder-content {
    width: auto !important;
}