I managed to code for a header and a navigation bar however I don't know how to set the elements such as:
Contact me. etc...
I want to seperate them apart and give them icons and align the text to the right.
(I'm using bootstrap4) however nothing seems to be working not even in the css.
<div class="navbar navbar-top" id="navbar-toolbar">
<div class"container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">+97433653399</a style="background-color: #ffff;">
<a class="nav-link" href="#">Contact</a>
<a class="nav-link" href="#">Help</a>
</li>
</div>
</ul>
</div>
Navbar
Home (current)
Login
Register
Contat us
I see that you are new to HTML and CSS, w3schools.com would be a great start. I can see that you still have some issues in wrapping your HTML elements (e.g. when to open and close a <div> tag. Before proceeding to CSS, it is advisable that you already learned the basics of HTML because you will be using them when putting an attribute that you want to access in CSS (e.g. id="", class="", name="", type="", etc.)
Related
I have a navigation bar whose links go to the anchors on the home page.
I wished on another page that these links also arrive on the home page and towards the anchors.
Here is my code.
Thanking you,
<li role="presentation" class="nav-item active">
Portfolio
</li>
...
<section id="portfolio">
Your question: How can I link to my portfolio on my homepage from another page.
My answer: Link using Go to my portfolio on my homepage on/from the other page
Other discussion:
Why not
<li role="presentation" class="nav-item active">
Portfolio
</li>
I assume you have some kind of scroller. If you do, you need to reuse it with the hash of the page you are on.
I'm a beginner in HTML and CSS and I watched this guy's tutorial on how to build a portfolio.
In the 'nav' class, he left the code as such,
<div class="nav">
<a class="a active" href="#">Home</a>
<a class="b"href="#">Gear</a>
<a class="c" href="#">Colour Dump</a>
<a class="d" href="#">BnW Dump</a>
</div>
The website he is building seems to be more of a local based html file and not meant to be hosted on actual server as there isn't any links in the buttons. How would I go about fixing this? I plan to host the website on an actual web server and I just tested it, the buttons do not lead anywhere due to a lack of buttons.
Here is a pastebin leading to my html file and
one to my css file.
My apologies if some of the classes names are misleading (i.e. do not match up to the titles), I was following his tutorial and only edited the details afterwards.
Thank you in advance for any help rendered!!
Your href links in a navigation will most likely link to another page on your website like this:
<div class="nav">
<a class="a active" href="/about">Home</a>
</div>
Another option would be an anchor link. This is the case for example if you have a single page website.
<div class="nav">
<a class="a active" href="#about">Home</a>
</div>
// Jumps to the element with the id="about"
If your nav would link to another website it would look something like this
<div class="nav">
<a class="a active" href="https://example.com">Go to Example</a>
</div>
// This link is external
Also interesting is to learn about the different attributes for links. You can find a goof read here.
I am doing the freecodecamp workthroughs and it hit an error in the script that tests the product landing page project I'm working on.
Problem is as follows:
When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.
However, my code as far as I can tell, does exactly that.
What in my code is causing this error?
My code, JS test hamburger hidden in logo in top left
Thanks for the help.
<header>
<div id="header">
<img id="header-img" src="https://i.imgur.com/KIqkWAZ.png" alt="handbooker helper logo"/>
<nav id="nav-bar">
<a class="nav-link" href="#infoLinks">Episodes</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="https://critrole.com/">More from Critical Role</a>
</nav>
</div>
</header>
Considering the script assumes all your nav-links correspond to a target on the same page, there's no way you can pass that story.
I tried it by replacing the link
href="https://critrole.com/"
with href="#test" and creating a div with id test, and the story passed after doing so.
can somebody of you have a look at this example:
http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle
I want to keep the toggle function, but the brand should be another link (homepage).
I tried like this:
<ul id="sidebar_menu" class="sidebar-nav">
<li class="sidebar-brand">
Menu<a id="menu-toggle" href="#">
<span id="main_icon" class="glyphicon glyphicon-align-justify"></span>
</a>
</li>
</ul>
But this will cause that there is a clickable brand, but the toggle button is not right from the brand. Instead it is in a new "navigation point".
Can somebody help me how I need to modify the given code to make this possible?
Thanks for any help! :)
This is your solution :
<li class="sidebar-brand">
<a style="width:50%;" href="index.php">Home</a>
<a id="menu-toggle" style="width:50%;height:95%" href="#"><span id="main_icon" class="glyphicon glyphicon-align-justify"></span></a>
</li>
You can also change "Home" to whatever you want.
also i should notice you have to put the styles in your style folder , but i added it inside tag for ease of describing.
I've looked at this for a number of hours now and can't figure out what is going on. Any help would be much appreciated thank you. It is a very strange problem and rather than going into detail I thought it best to just show you, so please find below a link to problem, currently on the development page of my website.
http://dev.cccit.co.uk/about-us/our-team/
As you can see the active dropdown seems to work along with the header being active in the nav bar as well, however when highlighting the nav select it is making the header appear darker and also not selecting the whole box (missing out the information section). It is probably easier to just see for yourself.... hover over About Us in the nav bar and you will see.
I thought initially this might be css related.... there is a separate css file for color selection which I have changed every option without any affect, and what makes me think this won't help is the strange way in which the whole menu is not changing when you hover. Please find a copy of the code below, bear in mind I'm using php for this section, but it also does the same thing regardless, so I have also changed the header for "Support" so that you can see it is doing the same thing.
I thought someone may have come across the same thing, if you need any more information or files, then please get in touch. Thank you in advance
`div class="container">
<div id="nav-wrapper">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="buttons-container">
</div>
<div class="nav-collapse">
<ul class="nav nav-pills">
<li class="single"><a href="../index.php">HOME
<i></i>
</a>
</li>
<li <?php if($pageName == "About Us")echo " class='dropdown active' ";?> class="dropdown">
<a href='/about-us'>
ABOUT US<i></i>
</a>
<ul class="dropdown-menu">
<li <?php if($pageMetaTitle == "Our Team")echo " class='active' ";?>>Our Team</li>
<li <?php if($pageMetaTitle == "Philosophy")echo " class='active' ";?>>Philosophy</li>
<li <?php if($pageMetaTitle == "FAQs")echo " class='active' ";?>>FAQs</li>
</ul>
</li>
<li class="dropdown active">
<a href="/support">
SUPPORT<i>IT support for business</i>
</a>
<ul class="dropdown-menu">
<li>Support Packages</li>
<li>Service Level Agreements</li>
<li>FAQs</li>
</ul>
</li>
`
Remove the custom background colors you set have for the <i> tags.
Noticing the hover effects on Firebug, the colors don't match the hover effects of the parent element.