Navigation bar terminologies and colour change

hamster_switch · December 2016

I have started a new website (currently far from complete)

http://www.sunnypyburn.co.uk/a-new-page/

I am trying to change the colour of the navigation bar. It is currently a blackish colour. I want to change it to something else. When I go to -

Appearance / BeTheme Options / colours

nothing I do there changes the colour of it.

Also, I am confused as to the terminology of things in BeTheme. I have always known it as the Navigation Bar, or NavBar. But on BeTheme I don't know weather it is referred to as the Action Bar, Action & Menu Bar or Menu Bar!?!?!?

Anyway, whatever you call it, on my site, it is the black/grey coloured thing all across the very top of the page which houses the both the Logo and links to primary webpages (currently just one called 'A NEW PAGE'). Every website in the last 20 years or so has one of some kind.

Please help!

Albert · December 2016

Hi,

Top bar background color can be changed under Theme options > Colors > Header section where Top Bar Left background option is.

Menu is called as the TOP BAR where all details like logo and other additional stuff on the right side are.

hamster_switch · December 2016

Hi there,

Thank you so much for your quick response! I apologise my manner was somewhat sarcastic/patronising. I spent hours trial and error-ing all the different colour options as well as fiddling about with other elements of the theme!!

http://www.sunnypyburn.co.uk/a-new-page/

I would like to alter the transparency of the Top Bar, and padding between the logo and the top bar? I can see there is a little transparency applied from the original theme demo (Watches), but I don't know how to alter it, and also, whatever the amount of padding thats there vertically between the logo and the top bar, it seems to preserve it at the cost of shrinking the logo if I reduce the width of the top bar.

Lastly, I would like to vertically centralize my logo (so its vertical center). Currently it is placed at the top?

Thank you for your help

Albert · December 2016

To remove transparency from Top Bar, you need to use the following css:

.header-fixed #Top_bar { opacity: 1 !important; }

But we are not sure what you would like to do with the logo padding. To center it vertically, please use:

.header-fixed #Top_bar .logo { margin-top: 15px !important; }

hamster_switch · December 2016

Thank you, the codes worked great!

I have created a short screencast video to explain to you the issue with padding between the logo and the top bar - https://youtu.be/ItMg-TDSccA

Please watch and let me know of a solution or if you have any further questions

hope this helps

Sunny

hamster_switch · December 2016

Here is another area which may require a small amount of code.

Each page I create seems to automatically include large area with the title of that page inserted in it. I would like to remove this for my current and all future pages.

I have created another short video for it which you can watch here - https://youtu.be/EeYAgl275s8

Please watch and let me know your thaughts

thanks,

Sunny

Albert · December 2016

The links you sent us above, does not work. We would be greatly appreciated if you can us on screenshots what you would like to do. We prefer them more than videos.

hamster_switch · December 2016

ok.

how to I insert images into these messages from my laptop?

In the mean time try these links to the videos I made

Logo padding issue

Deactivating page title that keeps apprearing

Albert · December 2016

The video has been removed because of unknown reasons these videos just freezed this topic. To send us screenshots of what you mean, you can use any online tool like http://pasteboard.co/ or http://snag.gy/ - please mark on these screenshots what exactly you would like to do.

hamster_switch · December 2016

http://www.sunnypyburn.co.uk/a-new-page/

ok regarding the logo padding issue -

here is a screen shot of my top bar with the logo in it - http://pasteboard.co/1fBIlrQdx.png

There is padding automatically applied which I have represented with red arrows on the screenshot.

In Appearance / BeTheme Options / Global / Logo, There is a "vertical padding" field with default as 15. When I type in a number lower than 15, it just sets the padding as 15 whereas if I input a number higher than 15 it sets the higher number

I want an amount of padding lower than 15. How can I accomplish this?

hamster_switch · December 2016

Regarding the page title area issue:

heres a screenshot of the webpage I am working on http://pasteboard.co/cwddg4Szw.png

Notice there is a grey box with the words "A New Page" and a white thin box beneath that?

I did not create this, it appears automatically. How do I get rid of it?

Thanks

Albert · December 2016

1. From what we can see, you want to decrease the top bar height and to do this, you need to use custom css:

.header-fixed #Top_bar .menu > li > a { padding: 0 !important; }

and also, please set up "Vertical Padding" logo option to 0.

2. This is Content Padding and you can disable it under Theme options > Global > Advanced section.

hamster_switch · January 2017

Ho thanks for your message.

1) You code only eliminates the padding between the bottom of the logo and the bottom edge of the top bar. In the screenshot http://pasteboard.co/1fBIlrQdx.png your code only eliminates the bottom red arrow of badding.

What I want to do is reduce the padding between the top of my logo and the top of the topbar, as well as the bottom of the logo and the bottom of the topbar. These areas have been shown using the red arrows I inserted into the screenshot. If I type a number 15 pixels or less in Appearance / BeTheme Options / Global / Logo - "vertical padding" field it will just put 15 pixels.

How do I change the number of pixels to 10 or any number less than 15?

hamster_switch · January 2017

2)

I have chnged the content padding to off. This has eliminated the bottom white bar, but doe not eliminate everything I wanted.

heres a screenshot of the webpage I am working on http://pasteboard.co/cwddg4Szw.png

Notice there is a grey/white/metallic area with the words "A New Page"? I did not create this. How do I eliminate this? I want to eliminate both the grey/white/metallic area AND the words "A New Page" not only for this page, but also for all pages I create.

Here is another screenshot which shows what I want this page to will look like - http://pasteboard.co/imwRiiTB0.png I just scrolled down the page past the grey/white/metallic area I want to eliminate to give you an idea

Thanks

Albert · January 2017

1) So if the code we gave you above, does not eliminate what you want, then we have only one, last solution to eliminate logo's padding:

.header-fixed #Top_bar .logo {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

But if above won't also fit to your needs, we do not have any other suggestion.

2) This is subheader which is being added on each page automatically and if you don't need it, you can disable it under Theme options > Header & Subheader > Subheader section.

hamster_switch · January 2017

I don't need it. But I can not fins any options in heme options > Header & Subheader > Subheader section to switch it off. Can you tell me how to switch it off completley?

hamster_switch · January 2017

ok, I have found how to disable the subheader box. Thanks.

As for the top bar, your code did not do anything either. I just want to control how to over-ride the default 15px vertical padding on the the top bar (appearence / betheme options / global / logo)??

Since I removed the sideheader box, the top bar seems to overlap onto the container (wedding picture) below it - http://pasteboard.co/iNQciVJt1.png

Any ideas as to how I can stop the top bar over lapping? I thought about implementing the subheader and match the width (in pixels) the same as the top bar. But when I do this I get - http://pasteboard.co/iNVpHFUse.png

thanks

Albert · January 2017

So if the code we gave you above does not work on your end, then we do not have any other solution unfortunately. Like we wrote above, this is the only suggestion we have to remove logo padding and we do not have any other solution.

Header overlap the content because you set Transparent header (yes, FIXED header type is kind of transparent) and this is the most proper behave of course. Anyway, if you don't like how transparent works, you should switch to different header type under Theme options > Header & Subheader > Header section. Or what you can also do is set top padding for the first section if you don't want it to overlap by header.

hamster_switch · January 2017

ok thank you for your help. I shall look into the sections. It sounds like a good idea to to use section as padding undernieth the top bar to avoid overlap.

I have a new problem with the responsiveness of the site. I did try to set up a new discussion but I exceeded the word count limit and couldnt send. Is there an email address I can send the message to?

thanks,

Sunny

Albert · January 2017

To send us private message, use contact form on the right at https://themeforest.net/user/muffingroup#contact

hamster_switch · January 2017

Hi there,

ok there is now no need to send a private message.

You mentioned about adding a section underneith the top bar. I would like to do this. I have added a section but I do not know how to insert 20px of padding (I want 60px as the width of the tob bar is 60px). I do not know which item I need to insert padding. Can you help?

Albert · January 2017

Yes, there is such need. Otherwise, we won't be able to do anything.

hamster_switch · January 2017

there is now no need to send a private message, I meant there is no need because I fixed the corresponding problem I had myself.

You mentioned about adding a section underneith the top bar. I would like to do this. I have added a section but I do not know how to insert 20px of padding (I want 60px as the width of the tob bar is 60px). I do not know which item I need to insert padding. Can you help?

Albert · January 2017

To add padding for the section, please go to section's edit and there is an option called Padding | Top where you can add this padding. For more details about section, please visit http://themes.muffingroup.com/betheme/documentation/#section

Navigation bar terminologies and colour change

Comments