Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Navigation and drop down menu items


EarthDriven

Question

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?  

Untitled.png

Link to comment
  • Answers 16
  • Created
  • Last Reply

Top Posters For This Question

16 answers to this question

Recommended Posts

  • 1
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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? 

Link to comment
  • 0
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. 

 

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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...1000439152_mobileversion.thumb.jpg.d47676962fafbb4d2622eac89d2edfef.jpg

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

image.thumb.png.d83de26c9ba939a25529f7fb5296a594.png

Looks fine here. Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...