Need some help to change my header spacing

[Carin Bosman]

Hi guys. Its been about 12 hours since i installed my brand-new AgamaPRO, and i think i am happy with most of the elements out-of-the-box – i still need to do my home-page, but in the meantime, there were a few issues with the out-of-the-box installation that i am not 100% happy about:

1) i need the BIG spacing between the two rows of my primary menu reduced – can anyone help me with custom CSS to achieve that, or suggest an alternative route that i could follow to reduce this big gap?

2)What got me to buy the pro version, was the slightly transparent menu that becomes smaller when you scroll down – now the menu does not become transparent at all, and kinda @ jumps@ , covering the fist part of my non-home pages too quickly – any ideas on how i can fix that?

3) I need to remove the RSS feed button from the sharing menus

4) why does the elements i build for my home page in the customiser ( sliders and services icon grid not show upo on my home page? how can i have them show up?

And thats all!!

Great theme, btw!

[Zex]

Hello, Carin!

Here are the solutions for you:

1. Insert the code below into Customizing->General->Additional CSS:

#menu-main-menu a.menu-link.main-menu-link{
    height:37px!important;
}

2. Try to change the header style, from the Customizing->Header->General, to Header V2.
https://prnt.sc/ng60hu

3. Go to > Customizing-> Social Icons, and remove the text from the RSS URL text field.

4. In order to show the front page boxes on the front page, open the Customizing ▸ Frontpage Boxes->General menu
and set the Visibility on Front Page.
https://prnt.sc/h8n9of

To show the Slider, edit your front page, (Dashboard->Pages->your front page/edit)
then scroll down to the bottom of the page, and enable slider on the page in “Agama options” meta box.

https://prnt.sc/h8nc0i
https://prnt.sc/h8nbap

I hope these answers will help you.
If you have additional questions, feel free to contact us again.

Best Regards

[Carin Bosman]

Thanks very much Zex, that really helped, and it looks much better 🙂

Another few niggly things that you could perhaps assist me with:

1) I added the Custom CSS as you described, and i also changed my header to V2, but i decided to only use the top menu, and not the main menue, so now the spacing on the top menu is also too much, and i would like to add the CSS to reduce that spacing as well.
2) I would also like my top menu to be right-aligned instead of left-aligned, and i would be very gratefgll if you could help me with the Custom CSS to achieve that.

3) i dont see my search button anywhere on my top menu, although i had turned it on to be there – what am i doing wrong?

4) The blue breadcrumbs bar is lovely, but it duplicates my headings of my pages? What do i have to do to only have the right-hand-side breadcrumb show, and not the left-hand one, and how do i get the title on the blue bar to be in the center instead of on the right-hand side

5) The foint sizews on my second-level menu items on the mobile is much larger than the fonst soizes for the level above them – how do i fix that, so that they are the same size??

6) The @ featured images@ on my blog does not show, although i have set them up to show – whee am i going wrong?

Thats all for now – thank you very much for all your help!

C

[Zex]

Hello, Carin!

1.,2. Unfortunately, the Header V2 style can have the main menu only, so isn’t possible to have the top menu in the combination with the Header V2 style.
Maybe you should try to go with the Header V3 style.
(You need to first, configure the menu as you like, then let me know, and I’ll try to give you the right code)

3. Search button only works in the main menu (not in the top).

4. You can set the custom Breadcrumb title per page from the Breadcrumb tab in the “Agama Options” meta box.

In your case, since you want only to have centered the right-hand part of the breadcrumb, insert the following code into Customizing->General->Additional CSS:

.vision-page-title-captions{
    display:none;
}
.vision-page-title-secondary {
    width: 100%;
    text-align: center;
}

@media screen and (max-width: 992px){
.vision-page-title-secondary {
    top: 20%!important;
}
}

5.
Insert the following code into Customizing->General->Additional CSS:

.mobile-menu .menu-item-depth-1 {
    font-size: 10px!important;
}

Change the font size value per your needs.

6. Go to the Customizing->Blog->Single Post menu and turn on the “Featured thumbnail”
https://prnt.sc/ngaogj

Regards

• This reply was modified 4 years, 1 month ago by Zex.
• This reply was modified 4 years, 1 month ago by Zex.

[Carin Bosman]

Hi Zex

Thank you very much once again. Your solutions for my title =bar and my mobile menus worked perfectly!!

I played around with the different types of headers, and irrespective of what i do, the search box does not appear anywhere, so i thought to move it above the image in my footer, but then it moves the image over (instead of being above it, and the fourth widget (Ouick links) moves right off the page!! If i add the search widget to after the “quick links” widget, it also is completely off the age – if the “search box” was a little smaller, it could have worked, but i dont know how to move that widget to either underneath the image, or how to make the search bar smaller. Any ideas on how i can fix that?

I also played around with the three types of header menus, and figured out that if i take the image off under header/header image, and add it under header/styling, it works a bit better, and looks good on header V2, but the spacing between the menu items are way too large.

If i select V1, the spacing for the menu items are MUCH better, and the social media icons are back (only on my inside pages, not on my home page though, and there is no search button anywhere, and my inside pages are saying “NO MENU ASSIGNED”in the top bar). With V1, there is no scrolling of the menu, and the area where the logo is located, has a solid blue background instead of my image, and if i add the image back under header/header image, the blue background is back, but i have a weird, duplicated image on my inside pages (my home page looks fine, except that it (adding the image back) increased the spacing of the logo again.

If i select V3, with the image loaded in both places, the home page looks OK, except for the large spacing of the menu, but the inside pages have this weird duplicated image, and again complains that there is no top menu assigned. (The social media icons are back, but only on the inside pages, not on the home page). If i remove the image from under header/header image, the home page still has no social media icons, and still has the large spacing problem, and although the inside pages now have the social media icons, it sill complains that i have no top menu assigned.

I then went to change my menu to top only, and selected the different header options, and V3 looks fine on the home page, but duplicated the menu on the inside pages, and the menu is above the social media links on the inside pages. The spacing also is still too large. For V1, the spacing is a bit better, although the menu is still duplicated on the inside pages, the social links are present. The home page has no social media links, and the spacing is too large again.

What i basically want is that the menu should display in only ONE place (I dont need to duplicate the menu), both on the home and the inside pages, which could be either right above the breadcrumbs bar, or towards the top, and to the RIGHT of my logo, with proper, smaller spacing between the two rows of menu items, like for V1, and that the social media icons should be in the top right, if possible, but without the requirement to add a top menu, or the duplication of menus on the inside pages. (I also see that my tagline has disappeared, and it does not matter which header version i use, its nowhere to be found).

I hope all of this makes sense – i tried to type everything out as i did it, and i currently have my settings set at V3, top menu enabled, no header image under header/header image, so that you can see what it looks like

Thanks again for all your assistance!

C

[Zex]

Hello, Carin!

1. To reduce the width of the search widget text field, insert the next code into Customizing->General->Additional CSS:

@media only screen and (min-width: 1200px) {
.vision-search-form, .vision-search-field {
    width: 65%;
  }
}

Set the width value per your needs.

2. Since the purpose of the top-menu is to be additional, and not the main menu, I recommend that you turn off the top menu, and leave only the primary. Turn on the top social icons, from the Header->General menu , then enter the following code, in Customizing-> General-> Additional CSS:

.sticky-nav > li > a, .sticky-nav > ul > li > a {
    line-height: 20px;
}
nav.pull-right.agama-primary-nav {
    max-width: 80%;
    padding-top: 15px;
}

To reduce the space between the rows of the menu,
and move the menu to the right.

I hope this will help you.

PS: Also, if you want it, there is a possibility to set different header styles from the “Agama options” meta boxes for each page separately.
https://prnt.sc/ngk9e7

Best Regards

[Carin Bosman]

Hi Zex

Thank you very much. I have implemented those settings, with header V2, because V1 and V3 still says : NO MENU ASSIGNED”, so there is now no social media icons on the top of my inside pages, and still no search icon anywhere. Oh well. I guess that is as good as it is going to get… unless you have a suggestion on how i can use V3 without the “NO MENU ASSIGNED”in the top?

What has happened when i implemented these changes, is that the WIDGET area on my inside pages are now no longer covering the full width of my page – there is white space on the sides, and i dont know how to fix that – can you tell me what to do to fix it please?

I have also managed to make the searchbox smaller in the widget area, but is there no way that i can have it above the image to the left of the widget area without the image moving to the middle? In other wrds, only have three widget coloumns, instead of 4?

Also, is there no way that i can get my menu items to be right-aligned, instead of left aligned?

I paste my custon CSS for you here, incase the problem with the widget area is somewhere in there

Thanks again for your assistance!

PS – i do not need the menu on my home page at all, and i need some text (my tagline) to come in from the side over my header image – is there any way i can achieve this with the customiser, or do i have to build my home page from a blank page? – is there

[Carin Bosman]

Oh, and oone more thing – my iimages are still not showing up on my blog page, although the settings are as you had suggested – any ideas on how i can fix it?

[Zex]

Hi,Carin!

1. The “NO MENU ASSIGNED” text means that you have the top-menu turned on in the header settings and you didn’t assign it to any menu you created.
If you don’t want the top menu to appear, just go to the Header->General->V3 and turn the top menu off, the text will disappear.
Don’t worry, your top social icons will remain untouched.
Or, if you want to have some additional navigation links in the top menu, go to Customizing->Menus->Top, then create the menu and assign it to the top menu.
https://prnt.sc/nglxgn

2. I don’t see any white space when I insert the code I gave you…
Can you give me some screenshot?

3. Remove the search widget from the footer widget 4 area, Edit the Footer Widget 1 and place the search widget above the image widget in the Footer area 1.
https://prnt.sc/ngmgm3

4. Try to insert the next codes instead of the codes I gave you in the previous post:

/*The space between the main menu navigation links*/
#masthead .agama-primary-nav a{
 line-height: 30px!important; 
}

#masthead .agama-primary-nav{
    margin-top:50px; 
    margin-bottom:50px;
}

nav.pull-right.agama-primary-nav {
    max-width: 80%;
    text-align: right!important;
}

Change the margin values per your needs.

5. If you want to remove the menu from your homepage only, use the next code:

/*Remove the primary navigation from the homepage only*/
.home .agama-primary-nav{
    display:none!important;
}

To have the text line on the top, use the Header v3 style with the Top-Menu enabled, then in the top menu add the custom link with your text (insert URL, or “#” if you don’t need an URL in the URL text field)
https://prnt.sc/ngmntg
https://prnt.sc/ngmoog

Regards

• This reply was modified 4 years, 1 month ago by Zex.

[Zex]

as for the problem with the images…
The option from the customizer should work, but if for some reason they still not showing up , you can insert the same image again, in the top of your blog post…

Regards

[Carin Bosman]

Hi Zex

Thanks a bunch, i feel we are actually getting somewhere!!

The white space next too the widget area was only visible on my inside pages, but seems fixed now – thank you

I did as you suggested, and the search bar is displaying in the right position now, it is above the image, but there is no space between the search button and the image – how can i create a space between them?

The menu under V3, with my tagline, now displays correctly and beautifully on my inside pages, but my homepage is a mess: I want my pig image there, no just the short on, and although i made all kids of inputs on the edit page for my home pager, none of it is displaying on my page, and the Agama boxes are not there either, nor are the sliders that i have made – what should i do to get my homepage to display the things it should be displaying?

Thanaks again for your patience with me!

[Carin Bosman]

Oh, and although my primary menu is now very nicely spaced, as soon as i hiover and the drop-down of the menu item opens, the secondary level has a too large spacing if it forms more than one line – how can i reduce that spacing?

Thank you!

[Zex]

Hi,Carin!
Here are the right codes for you:

1.

/*The space below the search widget*/
 form.search-form {
    padding-bottom: 15px;
}
/*Align the search box with the image below*/
@media only screen and (min-width: 1000px){
.vision-search-form,
.vision-search-field {
    width: 100%!important;
   }
}
@media only screen and (min-width: 1200px){
.vision-search-form,
.vision-search-field {
    width: 96%!important;
   }
}

2. How did you create content on your homepage?

If you are using our page builder, make sure you have selected your homepage in the “Page to build” drop-down from the Customizing->Page builder menu, then add the widgets to the page. after you finished, just hit the “Publish” button to save your changes.

Also, we suggesting our customers install the “Elementor” page builder plugin, with which you can easily build beautiful content on your pages.
please, check the next threads:
https://theme-vision.com/forums/topic/create-an-album-of-galleries/#post-12660
https://theme-vision.com/forums/topic/landing-pages/#post-11664

Also, many good tutorials can be found on youtube.

Here is some of them:

How To Make A WordPress Website Within One Hour (using the free Elementor page builder)

How To Design A Beautiful Homepage Using Elementor For WordPress

…but you can’t use both builders on the same page at the same time.

Next, in order to show the slider and the Front Page Boxes on your Homepage,

You need to enable your Slider from the Agama options meta-box at the bottom of your Homepage.
https://prnt.sc/ngo1zw
To enable your front-page boxes, you need to go to Customizing->Front Page Boxes->General and set the “Visibility” to the “Front Page”
https://prnt.sc/ngo03b
Also, make sure you have enabled every particular Box from the single Front Page box settings.
https://prnt.sc/ngo1fl

Regards

[Carin Bosman]

Hi Zex
Thank you, my widget area is now perfect.

However, although my primary menu is now very nicely spaced, as soon as i hover and the drop-down of the menu item opens, the secondary level has a too large spacing if it forms more than one line – how can i reduce that spacing?

Also, although my headers ion my inside pages, and the scrolling is now great, choosing V3 has also set the header in a weird way on my homepage – i need to remove the V3 settings from my homepage completely, so that it does not create distractions.

I am using the Site Origins page builder, with Smart Slider – i had to disable the Revolution Slider and the Layer Slider, as they made my page terribly slow, and i could not do anything with them without paying through the nose. Elementor is also too big, and takes forever to load – i did not have much success with it..

I want a simple home page, with a hero-image, and some text sliding in from the left, with a slideshow showing our servicises coming from the right, andd then the box-items, and the description of who we are, with our testimonials and client logos below that, and a call to action to register for our training underneath. Thats all. And it has taken me two days to achieve nothing, lol!

[Carin Bosman]

Oh, and one more question – how do i change the colour of the buttons that appear on my inside pages – i like then to be blue instead of grey?

[Author]

Posts